+
+
+
+
+
+
+
+
+
+
+
+ Close player
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Content or user blocked by a trusted contact.
+
+
+
+
+ Show anyway
+
+
+
+
+
+
+
+
+
+
+
+
+ CDN
+ 1 server
+
+
+
+
+ P2P
+ 0 peers
+
+
+
+
+
+
+
+
+
+ Peers: 0
+ Speed: 0 KB/s
+ Downloaded: 0 MB / 0 MB
+
+
+
+
+
+
+
+
+
+
+ Initializing... Just give it a sec.
+
+
+
+
+
+
+
+
+
No reactions yet
+
+
No reactions yet
+
+
+
+
+
+
+
+ Zap
+
+
+
+
+
+ Send a zap
+
+
+ ✕
+
+
+
+ Connect a wallet in
+
+ Wallet Connect settings
+
+ to send zaps.
+
+
+
+
+
+
+
+
+ Share
+
+
+
+
+ Embed
+
+
+
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+ Creator Name
+
+
npub...
+
+
+
+
+
+ No description available.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Similar Content
+
+
+
+
+
+
+
+
+
diff --git a/dist/config/asset-version.js b/dist/config/asset-version.js
new file mode 100644
index 00000000..6d3f28be
--- /dev/null
+++ b/dist/config/asset-version.js
@@ -0,0 +1 @@
+export const ASSET_VERSION = "2024.11.09-2";
diff --git a/dist/config/instance-config.js b/dist/config/instance-config.js
new file mode 100644
index 00000000..a391e0a2
--- /dev/null
+++ b/dist/config/instance-config.js
@@ -0,0 +1,448 @@
+// config/instance-config.js
+// -----------------------------------------------------------------------------
+// bitvid instance configuration
+// -----------------------------------------------------------------------------
+//
+// This file consolidates the values that operators usually customize when they
+// deploy their own bitvid instance. Update the exports below to match your
+// environment, commit the changes, and redeploy. Leaving this file in the repo
+// (instead of hidden in environment variables) makes it easy for future
+// maintainers to understand how your instance is configured.
+//
+// Each setting includes guidance about how bitvid uses the value and what
+// adjustments are safe. When in doubt, mirror the structure shown here so other
+// contributors can follow along.
+
+/**
+ * Whether the current deployment should enable developer-centric behavior.
+ *
+ * When `true`, bitvid surfaces extra logging, debug helpers, and experimental
+ * UI affordances intended for development environments. Set the value to
+ * `false` before deploying to production so that end users receive the stable
+ * experience. Downstream modules read this flag via `js/config.js`.
+ */
+export const IS_DEV_MODE = true;
+
+/**
+ * Whether development builds should surface extra verbose diagnostics.
+ *
+ * Set this to `true` to keep high-volume development warnings (like COUNT
+ * request failures) visible in the console. Flip it to `false` when you want
+ * a quieter dev mode without disabling other development helpers entirely.
+ */
+export const IS_VERBOSE_DEV_MODE = true;
+
+/**
+ * Whether the current deployment should operate in lockdown mode.
+ *
+ * When `true`, bitvid restricts access to operator-approved functionality and
+ * enables defensive UI copy intended for incidents or maintenance windows.
+ * Leave this `false` for normal operation so downstream modules (via
+ * `js/config.js`) continue exposing the full experience.
+ */
+export const IS_LOCKDOWN_MODE = false;
+
+/**
+ * The title displayed in the header when the site is in lockdown mode.
+ *
+ * Customize this to match the tone of your maintenance window or incident
+ * response. Default is "Maintenance Mode".
+ */
+export const LOCKDOWN_TITLE = "Maintenance Mode";
+
+/**
+ * The primary message displayed to visitors when the site is in lockdown mode.
+ *
+ * This text should explain why the site is unavailable and when users might
+ * expect it to return. Default is generic maintenance copy.
+ */
+export const LOCKDOWN_MESSAGE =
+ "We are currently undergoing maintenance. Please come back later.";
+
+/**
+ * The primary administrator for this bitvid instance.
+ *
+ * bitvid treats this Nostr public key (npub) as the "Super Admin". This user
+ * cannot be removed from moderator lists, and only they can promote new
+ * moderators or toggle whitelist-only mode. Replace the string below with the
+ * npub of the account you want to act as the ultimate authority for your
+ * deployment.
+ */
+export const ADMIN_SUPER_NPUB =
+ "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx";
+
+/**
+ * Canonical URL for the public bitvid site.
+ *
+ * Surfaces in admin outreach copy and moderation DMs so that recipients can
+ * quickly jump back to the primary destination. Update this if your
+ * deployment relies on a different canonical hostname.
+ */
+export const BITVID_WEBSITE_URL = "https://bitvid.network/";
+
+/**
+ * Optional external destination for the blog menu link.
+ *
+ * Sidebar navigation routes visitors to this URL when they select "Blog".
+ * Update the value to point at the long-form publishing platform you
+ * maintain for release notes or community updates. Leave empty (null or an
+ * empty string) to hide the Blog link entirely.
+ */
+export const BLOG_URL =
+ "https://habla.news/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe";
+
+/**
+ * Optional external destination for the community menu link.
+ *
+ * Configure this with a URL to your preferred community hub (e.g., Discord,
+ * Telegram, Flotilla). When unset (null or an empty string) the Community link
+ * is omitted from the sidebar dropup menu.
+ */
+export const COMMUNITY_URL = "https://groups.nip29.com/?relay=wss://relay.groups.nip29.com&groupId=d92ef5";
+
+/**
+ * Optional external destination for the Nostr menu link.
+ *
+ * Point this at the profile or relay hub you want visitors to land on when
+ * they tap "Nostr" in the sidebar dropup. Leave empty (null or an empty
+ * string) to hide the link entirely.
+ */
+export const NOSTR_URL =
+ "https://nostrudel.ninja/u/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe";
+
+/**
+ * Optional external destination for the GitHub menu link.
+ *
+ * Set this to the repository you want surfaced to operators and contributors.
+ * Leave empty (null or an empty string) to remove the GitHub entry from the
+ * sidebar dropup menu.
+ */
+export const GITHUB_URL = "https://github.com/PR0M3TH3AN/bitvid";
+
+/**
+ * Optional external destination for the Beta menu link.
+ *
+ * Deployments that maintain a staging or beta environment can direct users to
+ * that surface here. Leave empty (null or an empty string) if there is no
+ * public beta to advertise.
+ */
+export const BETA_URL = "https://beta.bitvid.network/";
+
+/**
+ * Optional external destination for the DNS menu link.
+ *
+ * Operators can expose their canonical DNS landing page here. Leave empty
+ * (null or an empty string) to hide the DNS entry from the sidebar.
+ */
+export const DNS_URL = "https://bitvid.network/";
+
+/**
+ * Optional external destination for the Tip Jar menu link.
+ *
+ * Configure this with the Lightning tipping experience you want to surface in
+ * the sidebar dropup. When left empty (null or an empty string) the Tip Jar
+ * entry is removed entirely so operators that do not collect donations are not
+ * forced to show the control.
+ */
+export const TIP_JAR_URL =
+ "https://nostrtipjar.netlify.app/?n=npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe";
+
+/**
+ * Default image included in automated moderation DMs.
+ *
+ * bitvid embeds this media asset at the top of notification messages so the
+ * payload renders with a recognizable preview. Provide a fully qualified URL
+ * that points to a hosted image accessible by the intended recipients.
+ */
+export const ADMIN_DM_IMAGE_URL =
+ "https://beta.bitvid.network/assets/jpg/video-thumbnail-fallback.jpg";
+
+/**
+ * Maximum satoshi value allowed when storing the default zap amount.
+ *
+ * Wallet settings clamp user input to this value before persistence to guard
+ * against accidental overpayment. Tune the ceiling to match your instance's
+ * risk tolerance.
+ */
+export const MAX_WALLET_DEFAULT_ZAP = 100000000;
+
+/**
+ * Percentage of every Lightning payment the platform retains as a fee.
+ *
+ * Accepts numbers between 0 and 100 (inclusive). Decimals are supported when
+ * you want to keep a fractional cut—e.g., `2.5` represents a 2.5% fee. The
+ * default of `0` disables the fee so creators receive the full payment.
+ */
+export const PLATFORM_FEE_PERCENT = 30;
+
+/**
+ * Lightning address to fall back to when authors omit their own `lud16`.
+ *
+ * Supply a string like `"tips@example.com"` to force a deployment-wide
+ * fallback Lightning address. When `PLATFORM_FEE_PERCENT` is greater than 0,
+ * this override also acts as the Lightning target for the platform’s split.
+ * Leave the value as `null` to respect the creator’s metadata and rely on the
+ * Super Admin profile publishing a `lud16` so bitvid still knows where to route
+ * fees when they are enabled.
+ */
+export const PLATFORM_LUD16_OVERRIDE = "adammalin@strike.me";
+
+/**
+ * Optional list of relays to seed new sessions with instead of the defaults.
+ *
+ * Provide WSS URLs (e.g., `"wss://relay.example.com"`). Leave the array empty
+ * to keep bitvid’s bundled defaults. Operators that need a custom bootstrap set
+ * should list the relays in priority order; entries later in the list are used
+ * as fallbacks when earlier relays fail.
+ */
+export const DEFAULT_RELAY_URLS_OVERRIDE = Object.freeze([
+ // "wss://relay.example.com",
+]);
+
+/**
+ * Storage key used to persist whitelist-only mode in the browser.
+ *
+ * You usually do not need to change this, but the export lives here so that all
+ * whitelist-related knobs are grouped together. If you do change the key, make
+ * sure to migrate any previously stored values in localStorage.
+ */
+export const ADMIN_WHITELIST_MODE_STORAGE_KEY = "bitvid_admin_whitelist_mode";
+
+/**
+ * Whether whitelist-only mode should be enabled the first time an operator
+ * loads the admin dashboard.
+ *
+ * Set this to `true` if you want bitvid to start with whitelist-only access and
+ * require an explicit opt-out. Set to `false` to allow all creators by default.
+ * Operators can still toggle the mode at runtime; this value only controls the
+ * default state when no preference has been stored in localStorage yet.
+ */
+export const DEFAULT_WHITELIST_MODE_ENABLED = true;
+
+/**
+ * Whether the public client should display content flagged as NSFW.
+ *
+ * When set to `false`, bitvid filters out any video notes marked with the
+ * `isNsfw` flag so they never appear in feeds or video lists. Toggle to `true`
+ * only if your deployment allows NSFW media to surface publicly.
+ */
+export const ALLOW_NSFW_CONTENT = false;
+
+/**
+ * Emergency fallback accounts for seeding the moderation graph.
+ *
+ * Runtime moderation now derives its trust seeds from the Super Admin and the
+ * active moderator roster, ensuring their reports shape anonymous/default
+ * visitor filters automatically. The array below is kept only as a last-resort
+ * fallback when the live moderator lists cannot be loaded (for example,
+ * bootstrapping a brand-new deployment or recovering from relay outages).
+ * Populate it with the operator keys you want to lean on during that rare
+ * failure mode; under normal conditions these values are ignored. bitvid will
+ * freeze and sanitize the npubs at runtime when reading from `js/config.js`.
+ */
+export const DEFAULT_TRUST_SEED_NPUBS = [
+ "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx",
+ "npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe",
+];
+
+/**
+ * Baseline trusted-report count that triggers thumbnail blurring.
+ *
+ * When a video receives at least this many trusted reports for the active
+ * category (for example, `nudity`), thumbnails render with the blurred preview
+ * by default. Align this value with your moderation policy — the upstream
+ * deployment targets 3 trusted reports before blurring.
+ */
+export const DEFAULT_BLUR_THRESHOLD = 1;
+
+/**
+ * Baseline trusted-report count that blocks autoplay during browsing.
+ *
+ * Videos that meet or exceed this count will not autoplay in feeds unless the
+ * viewer explicitly opts in. Increase the number for a more permissive stance
+ * or decrease it if you want autoplay to stop sooner. The upstream deployment
+ * targets 2 trusted reports before blocking autoplay.
+ */
+export const DEFAULT_AUTOPLAY_BLOCK_THRESHOLD = 1;
+
+/**
+ * Trusted mute threshold that hides creators globally.
+ *
+ * Once this many trusted accounts mute a creator, their videos disappear from
+ * feeds until an operator intervenes. Keep the value low (1–2) to rapidly
+ * enforce community standards or raise it to tolerate more reports before
+ * hiding.
+ */
+export const DEFAULT_TRUSTED_MUTE_HIDE_THRESHOLD = 20;
+
+/**
+ * Trusted spam/report threshold that hides videos globally.
+ *
+ * When a video's trusted report count reaches this number, bitvid treats it as
+ * spam or policy violating content and removes it from default feeds. Align
+ * the value with your moderation policy — 3 trusted reports is the upstream
+ * baseline.
+ */
+export const DEFAULT_TRUSTED_SPAM_HIDE_THRESHOLD = 1;
+
+/**
+ * Optional theme accent overrides for light and dark mode.
+ *
+ * Operators can provide hex color strings (e.g., `"#2563eb"`) to customize the
+ * accent tokens without editing the generated CSS bundle. Leave values as
+ * `null` to keep the upstream defaults defined in `css/tokens.css`. Each theme
+ * accepts overrides for the base accent color as well as the stronger and
+ * pressed states used for hover/active presentations.
+ */
+export const THEME_ACCENT_OVERRIDES = Object.freeze({
+ light: Object.freeze({
+ accent: "#540011",
+ accentStrong: "#fe0032",
+ accentPressed: "#a90021",
+ }),
+ dark: Object.freeze({
+ accent: "#540011",
+ accentStrong: "#fe0032",
+ accentPressed: "#a90021",
+ }),
+});
+
+/**
+ * Nostr kind used when persisting watch history events.
+ *
+ * bitvid standardizes on kind 30079 so that watch events, view logs, and media
+ * metadata stay in the same family of documents. Operators that want to
+ * experiment with a separate list kind (for example, a NIP-51 collection) can
+ * flip this number so long as their relays accept the chosen kind.
+ */
+export const WATCH_HISTORY_KIND = 30079;
+
+/**
+ * Identifier applied to the watch-history list when storing it on relays.
+ *
+ * This becomes the value of the `d` tag so clients can find the correct list
+ * without guessing. Customize the slug if you need isolation between multiple
+ * bitvid deployments that share relays, but keep it stable once clients begin
+ * syncing history.
+ */
+export const WATCH_HISTORY_LIST_IDENTIFIER = "watch-history";
+
+/**
+ * Maximum number of watch-history entries to retain per user.
+ *
+ * The roadmap targets a rolling window of 1,500 items so the UI can highlight
+ * recently played videos without ballooning relay storage. Adjust this cap up
+ * or down depending on your retention and privacy policies; smaller values
+ * reduce storage pressure while larger ones surface a deeper backlog.
+ */
+export const WATCH_HISTORY_MAX_ITEMS = 1500;
+
+/**
+ * Whether clients should resolve watch-history entries in batches.
+ *
+ * When enabled, bitvid fetches video metadata in grouped queries instead of
+ * issuing one request per entry. Operators with relays that struggle under
+ * bursty loads can disable batching at the cost of additional round trips.
+ */
+export const WATCH_HISTORY_BATCH_RESOLVE = true;
+
+/**
+ * Maximum number of canonical items each batched watch-history response should
+ * include.
+ *
+ * Leave this as `null` (the default) to return the full
+ * `WATCH_HISTORY_MAX_ITEMS` window, even when batching is enabled. Deployments
+ * that page through histories in smaller slices can set a positive integer to
+ * cap the resolver output so pagination and API responses stay aligned.
+ */
+export const WATCH_HISTORY_BATCH_PAGE_SIZE = 10;
+
+/**
+ * Maximum size of the JSON payload for each watch-history chunk, measured
+ * before encryption.
+ *
+ * bitvid splits large histories across multiple events to stay within relay
+ * limits. This cap keeps individual chunks under roughly 60 KB so that
+ * encrypted payloads remain relay-friendly even after base64 expansion.
+ * Lower the number if your relays enforce tighter limits.
+ */
+export const WATCH_HISTORY_PAYLOAD_MAX_BYTES = 60000;
+
+/**
+ * Number of watch-history events to request when syncing from relays.
+ *
+ * Chunked histories can span several events. This fetch limit should exceed
+ * the maximum number of chunks you expect a client to publish in one snapshot
+ * so the UI can stitch the full list back together.
+ */
+export const WATCH_HISTORY_FETCH_EVENT_LIMIT = 64;
+
+/**
+ * How long clients should cache watch-history snapshots in localStorage.
+ *
+ * A 24-hour window keeps recently played videos available across reloads
+ * without requiring a fresh relay sync on every visit. Increase the value for
+ * longer-lived caches or decrease it if your deployment needs tighter
+ * retention guarantees.
+ */
+export const WATCH_HISTORY_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * How long the view counter should treat repeat plays as duplicates.
+ *
+ * bitvid de-duplicates view events that occur within this rolling window so
+ * quick refreshes or stalled replays do not inflate the totals. The default of
+ * 24 hours mirrors common analytics tooling, but you can tighten or relax the
+ * window depending on how aggressively you want to filter repeat traffic.
+ */
+export const VIEW_COUNT_DEDUPE_WINDOW_SECONDS = 86_400;
+
+/**
+ * How far back the view counter should hydrate historical events during
+ * backfills.
+ *
+ * When a new analytics worker starts up, it can walk older Nostr events to
+ * reconstruct totals. Limiting the backfill horizon keeps catch-up jobs
+ * bounded—90 days covers recent trends without hammering relays for year-old
+ * history. Increase the number if you need deeper analytics or shrink it for
+ * lighter start-up workloads.
+ */
+export const VIEW_COUNT_BACKFILL_MAX_DAYS = 90;
+
+/**
+ * How long clients can trust cached view totals before re-fetching.
+ *
+ * Cached results smooth out traffic spikes and reduce relay load. Five minutes
+ * strikes a balance between responsiveness and efficiency; lower the TTL for
+ * fresher dashboards or raise it if your analytics traffic is heavy.
+ */
+export const VIEW_COUNT_CACHE_TTL_MS = 5 * 60 * 1000;
+
+/**
+ * Cooldown window (in seconds) between manual "Rebroadcast" attempts.
+ *
+ * Rebroadcasting is an escape hatch for creators to nudge stale relays. A
+ * short cooldown keeps this safeguard from turning into an accidental DDoS.
+ * Five minutes provides enough breathing room for relays to catch up while
+ * still letting operators retry if a publish genuinely failed.
+ */
+export const ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS = 5 * 60;
+
+/**
+ * Preferred playback source strategy.
+ *
+ * Options:
+ * - "url": Try CDN/URL first, fall back to WebTorrent.
+ * - "torrent": Try WebTorrent first, fall back to CDN/URL.
+ */
+export const DEFAULT_PLAYBACK_SOURCE = "torrent";
+
+/**
+ * Timeout (in milliseconds) for the initial playback attempt.
+ *
+ * If the preferred source (URL or Torrent) does not reach the "playing" state
+ * within this window, the player will automatically switch to the fallback
+ * source. This prevents users from staring at a loading spinner indefinitely
+ * if the primary source is slow or stalled.
+ */
+export const DEFAULT_PLAYBACK_START_TIMEOUT = 3000;
diff --git a/dist/config/validate-config.js b/dist/config/validate-config.js
new file mode 100644
index 00000000..83118535
--- /dev/null
+++ b/dist/config/validate-config.js
@@ -0,0 +1,184 @@
+// config/validate-config.js
+// -----------------------------------------------------------------------------
+// Runtime validation helpers for instance-level configuration
+// -----------------------------------------------------------------------------
+
+import {
+ ADMIN_SUPER_NPUB,
+ PLATFORM_FEE_PERCENT,
+ PLATFORM_LUD16_OVERRIDE,
+ THEME_ACCENT_OVERRIDES,
+ BLOG_URL,
+ COMMUNITY_URL,
+ NOSTR_URL,
+ GITHUB_URL,
+ BETA_URL,
+ DNS_URL,
+ TIP_JAR_URL,
+} from "./instance-config.js";
+
+function assertSuperAdminConfigured(value) {
+ if (typeof value !== "string") {
+ throw new Error(
+ "ADMIN_SUPER_NPUB must be a string exported from config/instance-config.js."
+ );
+ }
+
+ const trimmed = value.trim();
+ if (!trimmed) {
+ throw new Error(
+ "ADMIN_SUPER_NPUB is required. Populate it with the Super Admin npub in config/instance-config.js."
+ );
+ }
+
+ if (!trimmed.startsWith("npub")) {
+ throw new Error(
+ "ADMIN_SUPER_NPUB should be a bech32 npub (e.g., starting with 'npub')."
+ );
+ }
+ return trimmed;
+}
+
+function assertPlatformFeeInRange(value) {
+ const numericValue =
+ typeof value === "number" ? value : Number.parseFloat(value);
+
+ if (!Number.isFinite(numericValue)) {
+ throw new Error(
+ "PLATFORM_FEE_PERCENT must be a finite number between 0 and 100."
+ );
+ }
+
+ if (numericValue < 0 || numericValue > 100) {
+ throw new Error("PLATFORM_FEE_PERCENT must be between 0 and 100 inclusive.");
+ }
+
+ return numericValue;
+}
+
+function getPlatformLud16Override(value) {
+ if (typeof value !== "string") {
+ return "";
+ }
+
+ return value.trim();
+}
+
+const ACCENT_HEX_PATTERN = /^#(?:[0-9a-fA-F]{6})$/;
+
+function assertThemeAccentOverrides(overrides) {
+ const source =
+ overrides && typeof overrides === "object"
+ ? overrides
+ : THEME_ACCENT_OVERRIDES;
+
+ const allowedThemes = new Set(["light", "dark"]);
+ const allowedTokens = ["accent", "accentStrong", "accentPressed"];
+
+ Object.entries(source).forEach(([theme, themeOverrides]) => {
+ if (!allowedThemes.has(theme) || themeOverrides == null) {
+ return;
+ }
+
+ if (typeof themeOverrides !== "object") {
+ throw new Error(
+ `THEME_ACCENT_OVERRIDES.${theme} must be an object with accent overrides.`
+ );
+ }
+
+ allowedTokens.forEach((token) => {
+ const rawValue = themeOverrides[token];
+ if (rawValue == null || rawValue === "") {
+ return;
+ }
+
+ if (typeof rawValue !== "string") {
+ throw new Error(
+ `THEME_ACCENT_OVERRIDES.${theme}.${token} must be a hex string (e.g., '#2563eb').`
+ );
+ }
+
+ const trimmed = rawValue.trim();
+ if (!ACCENT_HEX_PATTERN.test(trimmed)) {
+ throw new Error(
+ `THEME_ACCENT_OVERRIDES.${theme}.${token} must be a #RRGGBB hex color.`
+ );
+ }
+ });
+ });
+}
+
+function resolveConfig(overrides = {}) {
+ return {
+ adminSuperNpub:
+ overrides.ADMIN_SUPER_NPUB ?? ADMIN_SUPER_NPUB,
+ platformFeePercent:
+ overrides.PLATFORM_FEE_PERCENT ?? PLATFORM_FEE_PERCENT,
+ platformLud16Override:
+ overrides.PLATFORM_LUD16_OVERRIDE ?? PLATFORM_LUD16_OVERRIDE,
+ themeAccentOverrides:
+ overrides.THEME_ACCENT_OVERRIDES ?? THEME_ACCENT_OVERRIDES,
+ blogUrl: overrides.BLOG_URL ?? BLOG_URL,
+ communityUrl: overrides.COMMUNITY_URL ?? COMMUNITY_URL,
+ nostrUrl: overrides.NOSTR_URL ?? NOSTR_URL,
+ githubUrl: overrides.GITHUB_URL ?? GITHUB_URL,
+ betaUrl: overrides.BETA_URL ?? BETA_URL,
+ dnsUrl: overrides.DNS_URL ?? DNS_URL,
+ tipJarUrl: overrides.TIP_JAR_URL ?? TIP_JAR_URL,
+ };
+}
+
+function assertOptionalHttpUrl(url, settingName) {
+ if (url == null) {
+ return null;
+ }
+
+ if (typeof url !== "string") {
+ throw new Error(`${settingName} must be a string when provided.`);
+ }
+
+ const trimmed = url.trim();
+ if (!trimmed) {
+ return null;
+ }
+
+ try {
+ const parsed = new URL(trimmed);
+ if (!parsed.protocol || !/^https?:$/.test(parsed.protocol)) {
+ throw new Error(`${settingName} must use http or https.`);
+ }
+ } catch (error) {
+ throw new Error(
+ `${settingName} must be a valid http(s) URL defined in config/instance-config.js.`,
+ { cause: error },
+ );
+ }
+
+ return trimmed;
+}
+
+export function validateInstanceConfig(overrides) {
+ const config = resolveConfig(overrides);
+ assertSuperAdminConfigured(config.adminSuperNpub);
+ const platformFeePercent = assertPlatformFeeInRange(
+ config.platformFeePercent
+ );
+ const trimmedOverride = getPlatformLud16Override(
+ config.platformLud16Override
+ );
+
+ if (platformFeePercent > 0 && !trimmedOverride) {
+ throw new Error(
+ "PLATFORM_FEE_PERCENT is positive but PLATFORM_LUD16_OVERRIDE is empty. Set PLATFORM_LUD16_OVERRIDE to the Lightning address that should receive the platform's split, or publish a lud16 value on the Super Admin profile so bitvid can route platform fees."
+ );
+ }
+
+ assertThemeAccentOverrides(config.themeAccentOverrides);
+ assertOptionalHttpUrl(config.blogUrl, "BLOG_URL");
+ assertOptionalHttpUrl(config.communityUrl, "COMMUNITY_URL");
+ assertOptionalHttpUrl(config.nostrUrl, "NOSTR_URL");
+ assertOptionalHttpUrl(config.githubUrl, "GITHUB_URL");
+ assertOptionalHttpUrl(config.betaUrl, "BETA_URL");
+ assertOptionalHttpUrl(config.dnsUrl, "DNS_URL");
+ assertOptionalHttpUrl(config.tipJarUrl, "TIP_JAR_URL");
+}
diff --git a/dist/content/docs/about.md b/dist/content/docs/about.md
new file mode 100644
index 00000000..d61f2579
--- /dev/null
+++ b/dist/content/docs/about.md
@@ -0,0 +1,20 @@
+Welcome to bitvid, a new kind of video platform that puts you in control. Unlike traditional video sites that keep your content on their servers, bitvid lets videos flow directly between creators and viewers. Think of it like a digital potluck where everyone brings and shares content directly with each other!
+
+## What Makes bitvid Different?
+
+- **You're in Control**: Your videos stay yours. No company owns or controls your content – you share it directly with your viewers.
+- **Always Available**: Because videos are shared between viewers, popular content actually loads faster instead of slower. No more buffering during peak times!
+- **Privacy First**: No need for email or password – you log in with a secure key that only you control.
+- **Support Creators Directly**: Send tips to creators you love without a platform taking a big cut.
+- **Free and Open**: bitvid's code is open source, meaning anyone can check how it works or help make it better.
+
+## How Does It Work?
+
+bitvid uses two main technologies to make this all possible:
+
+1. **WebTorrent**: This lets viewers stream videos directly from other viewers, like a relay race passing the content from person to person.
+2. **Nostr**: This handles your login and video details, like a digital ID card that works across many sites.
+
+## Join the Revolution
+
+Whether you're tired of traditional platforms controlling your content, care about privacy, or just want a better way to share videos, bitvid offers a fresh alternative. Come be part of the future of video sharing!
diff --git a/dist/content/docs/community/community-guidelines.md b/dist/content/docs/community/community-guidelines.md
new file mode 100644
index 00000000..d401d7d7
--- /dev/null
+++ b/dist/content/docs/community/community-guidelines.md
@@ -0,0 +1,106 @@
+Welcome to **bitvid**, a decentralized video-sharing platform built on Nostr. These Community Guidelines outline the types of content allowed and prohibited on the client hosted at this domain. Enforcement occurs at the **client level** with blur, hide, and downrank rules that mirror the current moderator tooling. Personal blocklists, mute controls, admin blacklists, and NIP-56 reporting are already available so you can tune your own experience.
+
+> ⚠️ **Note:** Don't like the Guidelines? [Fork the code](https://github.com/PR0M3TH3AN/bitvid) and host the client on your own domain.
+
+## **1. Content Principles**
+
+bitvid aims to support **free expression** while maintaining a platform where users feel safe and respected. To achieve this balance, the following principles guide our moderation approach:
+
+- **Decentralization:** We do not host videos directly but enable peer-to-peer sharing through WebTorrent and Nostr.
+- **User Moderation:** Users have control over their feeds through subscriptions, blocking, and reporting.
+- **Transparency:** Enforcement actions at the client level are visible, and policy updates will be communicated openly.
+
+## **2. Allowed Content**
+
+bitvid encourages a wide range of content, including but not limited to:
+
+- **Educational and informative videos** (tech tutorials, history, science, etc.).
+- **Entertainment** (music, gaming, comedy, reviews, etc.).
+- **News and journalism** (independent reporting and discussions).
+- **Creative works** (art, animations, short films, open-source projects, etc.).
+- **Discussions and opinions** (provided they adhere to respectful discourse).
+
+## **3. Prohibited Content**
+
+To maintain a functional and ethical platform, the following types of content are blocked at the client level:
+
+### **3.1. Illegal Content**
+
+- Content that violates applicable laws, including but not limited to:
+ - **CSAM (Child Sexual Abuse Material)** (immediate report and block enforcement).
+ - **Human trafficking, exploitation, or abuse.**
+ - **Direct threats or incitements to violence.**
+ - **Explicit doxxing or leaking of private information without consent.**
+ - **Fraudulent or scam content (e.g., Ponzi schemes, fake giveaways, impersonation).**
+
+### **3.2. Spam and Low-Quality Content**
+
+- Mass-uploaded, repetitive, or bot-generated content intended to flood the platform.
+- Clickbait thumbnails/titles that mislead viewers.
+- Excessive self-promotion with no meaningful engagement.
+
+### **3.3. NSFW and Sensitive Content**
+
+- **Pornographic material** (non-artistic sexually explicit content is not allowed at this stage).
+- **Extreme gore or graphic violence** (unless in an educational or journalistic context).
+- **Hate speech, racism, or targeted harassment.**
+- **Calls for harm against individuals or groups based on race, religion, nationality, gender, or sexual orientation.**
+- **Encouragement of self-harm, suicide, or dangerous activities.**
+
+### **3.4. AI-Generated and Deepfake Content**
+
+- **Deepfake impersonations** of real people used for deceptive purposes.
+- AI-generated content must be **clearly labeled** to avoid misinformation.
+
+## **4. Enforcement & Visibility Controls**
+
+bitvid enforces these guidelines through client-side visibility rules that match the current `moreMenuController` and `userBlocks` behavior:
+
+- **Blurred previews:** When trusted NIP-56 `nudity` reports reach the configured blur threshold (`DEFAULT_BLUR_THRESHOLD` in [`config/instance-config.js`](../config/instance-config.js)), thumbnails render blurred and autoplay previews pause. Every blur includes a “show anyway” override. The upstream configuration currently uses three trusted reporters, but adjust the export to match your policy.
+- **Downranked authors:** Muting a creator adds them to your NIP-51 mute list (kind `10000`). Videos from muted creators are deprioritized but still visible with clear badges so you can reverse the action.
+- **Personal blocks:** Blocking a creator adds them to your private block list (`userBlocks`). Videos from blocked creators are hidden from feeds, carousels, and modals unless you explicitly unblock them.
+- **Admin hard hides:** Moderator-maintained blacklists (NIP-51 kind `30000`) remove creators from default feeds for everyone using the hosted client. Moderators can still review the content through “show anyway” controls when auditing decisions.
+- **Relay transparency:** Because enforcement is client-side, blocked or blurred videos may still exist on relays and appear in other Nostr clients that do not apply these rules.
+
+## **5. User Moderation Controls**
+
+You can manage moderation directly from the client using the existing menus rendered by `videoMenuRenderers`:
+
+### **5.1 Personal blocklist (`userBlocks`)**
+
+- Open any video card or modal and select the **More** (`···`) button. Choose **Block creator** to hide all future uploads from that pubkey. `moreMenuController` will confirm the action and refresh your feeds.
+- To review or remove blocks, open your profile avatar → **Profile** → **Blocked**. The list is private to your account; use **Unblock** next to a creator to restore their videos.
+
+### **5.2 Mute list management**
+
+- Use the same **More** menu and pick **Mute creator**. Muted creators stay visible but are downranked, aligning with the viewer mute list logic in `moreMenuController`.
+- Return to a muted creator’s video later and select **Unmute creator** from the menu to restore their normal ranking.
+
+### **5.3 Moderator blacklist controls**
+
+- Moderators with admin permissions see **Blacklist creator** inside the **More** menu. This updates the shared admin list managed by `moreMenuController` and immediately removes the creator from default feeds.
+- Only accounts with edit rights can add or remove creators. Attempting to blacklist without sufficient permissions will surface an error toast.
+
+### **5.4 Reporting workflow (NIP-56)**
+
+- Select **Report video** from the **More** menu to launch the reporting modal. Provide a category (e.g., `nudity`, `spam`, `illegal`) and submit; the client signs a NIP-56 report from your connected key.
+- Reports feed the same trusted-report scoring used for blur and hide decisions. Moderators monitor these queues to escalate urgent cases.
+
+### **5.5 Safety & Moderation thresholds**
+
+- Open your profile avatar → **Profile** → **Safety & Moderation** to adjust blur and autoplay thresholds. Leave a field blank to return to the defaults exported from [`config/instance-config.js`](../config/instance-config.js) (`DEFAULT_BLUR_THRESHOLD`, `DEFAULT_AUTOPLAY_BLOCK_THRESHOLD`, `DEFAULT_TRUSTED_MUTE_HIDE_THRESHOLD`, `DEFAULT_TRUSTED_SPAM_HIDE_THRESHOLD`). The upstream repo ships example values of 1 trusted report for blur, 1 for autoplay blocking, 20 trusted mutes to hide authors, and 1 trusted spam report to hide videos—tune the config file before deployment if your community needs different baselines.
+- These controls update immediately and sync with the moderation overlays applied by `moreMenuController` and `VideoCard` components. Operators can edit the config file to change the baseline before deploying their own instance.
+
+## **6. Appeals and Feedback**
+
+As we refine the moderation system, we welcome feedback from early users. If you believe your content was unfairly blocked, you can appeal by reaching out through bitvid’s Nostr channels.
+
+## **7. Final Notes**
+
+bitvid is committed to **free speech and open platforms** while acknowledging the need for responsible content moderation. These guidelines will continue to evolve as we develop better tools for user moderation and decentralized governance.
+
+> ⚠️ **Note:** If you agree to follow these guidelines then [submit an application](https://bitvid.network/?modal=application) to be a content creator!
+
+> ⚠️ **Note:** If you believe your content was unfairly blocked or restricted on [bitvid.network](https://bitvid.network/), please complete [this form](https://bitvid.network/?modal=appeals).
+
+Thank you for being part of the early bitvid community!
diff --git a/dist/content/docs/community/index.md b/dist/content/docs/community/index.md
new file mode 100644
index 00000000..fbb4103f
--- /dev/null
+++ b/dist/content/docs/community/index.md
@@ -0,0 +1,8 @@
+# Community
+
+Connect with other bitvid users and learn about our community standards.
+
+## Resources
+
+- **[Community Guidelines](#view=docs&doc=community-guidelines)**: Expectations for behavior and content.
+- **[Links](#view=docs&doc=links)**: Official links and resources.
diff --git a/dist/content/docs/community/links.md b/dist/content/docs/community/links.md
new file mode 100644
index 00000000..a3374759
--- /dev/null
+++ b/dist/content/docs/community/links.md
@@ -0,0 +1,131 @@
+Here is a collection of links to forms and pages.
+
+---
+
+## Forms
+
+---
+
+### Application Form
+
+Main - [bitvid.network?modal=application](https://bitvid.network?modal=application)
+
+Beta - [beta.bitvid.network?modal=application](https://beta.bitvid.network?modal=application)
+
+---
+
+### Bug Fix Form
+
+Main - [bitvid.network?modal=bug](https://bitvid.network?modal=bug)
+
+Beta - [beta.bitvid.network?modal=bug](https://beta.bitvid.network?modal=bug)
+
+---
+
+### Content Appeals Form
+
+Main - [bitvid.network?modal=appeals](https://bitvid.network?modal=appeals)
+
+Beta - [beta.bitvid.network?modal=appeals](https://beta.bitvid.network?modal=appeals)
+
+---
+
+### Feature Request Form
+
+Main - [bitvid.network?modal=feature](https://bitvid.network?modal=feature)
+
+Beta - [beta.bitvid.network?modal=feature](https://beta.bitvid.network?modal=feature)
+
+---
+
+### General Feedback Form
+
+Main - [bitvid.network?modal=feedback](https://bitvid.network?modal=feedback)
+
+Beta - [beta.bitvid.network?modal=feedback](https://beta.bitvid.network?modal=feedback)
+
+---
+
+## Views
+
+---
+
+### Home
+
+Main - [bitvid.network#view=most-recent-videos](https://bitvid.network#view=most-recent-videos)
+
+Beta - [beta.bitvid.network#view=most-recent-videos](https://beta.bitvid.network#view=most-recent-videos)
+
+---
+
+### Explore
+
+Main - [bitvid.network#view=explore](https://bitvid.network#view=explore)
+
+Beta - [beta.bitvid.network#view=explore](https://beta.bitvid.network#view=explore)
+
+---
+
+### Subscriptions
+
+_Requires Nostr login_
+
+Main - [bitvid.network#view=subscriptions](https://bitvid.network#view=subscriptions)
+
+Beta - [beta.bitvid.network#view=subscriptions](https://beta.bitvid.network#view=subscriptions)
+
+---
+
+### About
+
+Main - [bitvid.network#view=about](https://bitvid.network#view=about)
+
+Beta - [beta.bitvid.network#view=about](https://beta.bitvid.network#view=about)
+
+---
+
+### Guidelines
+
+Main - [bitvid.network#view=community-guidelines](https://bitvid.network#view=community-guidelines)
+
+Beta - [beta.bitvid.network#view=community-guidelines](https://beta.bitvid.network#view=community-guidelines)
+
+---
+
+### Getting Started
+
+Main - [bitvid.network#view=getting-started](https://bitvid.network#view=getting-started)
+
+Beta - [beta.bitvid.network#view=getting-started](https://beta.bitvid.network#view=getting-started)
+
+---
+
+### Roadmap
+
+Main - [bitvid.network#view=roadmap](https://bitvid.network#view=roadmap)
+
+Beta - [beta.bitvid.network#view=roadmap](https://beta.bitvid.network#view=roadmap)
+
+---
+
+### βeacon
+
+Main - [bitvid.network/torrent/beacon.html](https://bitvid.network/torrent/beacon.html)
+
+Beta - [beta.bitvid.network/torrent/beacon.html](https://beta.bitvid.network/torrent/beacon.html)
+
+---
+
+### Beta
+
+Main - [bitvid.network](https://bitvid.network)
+
+Beta - [beta.bitvid.network](https://beta.bitvid.network)
+
+---
+
+### Links
+
+Main - [bitvid.network#view=links](https://bitvid.network#view=links)
+
+Beta - [beta.bitvid.network#view=links](https://beta.bitvid.network#view=links)
diff --git a/dist/content/docs/getting-started.md b/dist/content/docs/getting-started.md
new file mode 100644
index 00000000..d3f46855
--- /dev/null
+++ b/dist/content/docs/getting-started.md
@@ -0,0 +1,47 @@
+Ready to jump in? Here's everything you need to know to start watching and sharing videos on bitvid.
+
+## Watching Videos
+
+1. Just visit [bitvid.network](https://bitvid.network) or one of our alternate sites like [bitvid.btc.us](https://bitvid.btc.us) and [bitvid.eth.limo](https://bitvid.eth.limo).
+2. Browse the videos on the homepage
+3. Click any video to start watching
+ That's it! No account needed to watch.
+
+## Sharing Your Videos
+
+### Step 1: Set Up Your Account
+
+> ⚠️ **Note:** We are currently invite-only. [Submit an application](https://bitvid.network/?modal=application) to request approval for posting content.
+
+1. Install a [Nostr extension](https://nostrapps.com/#signers#all) (like Alby or Nos2x) in your browser
+2. The extension creates your secure login key automatically
+3. Click "Login" on bitvid to connect
+
+### Step 2: Prepare Your Video
+
+1. Host your video at an HTTPS URL that browsers can stream directly (MP4/WebM/HLS/DASH all work). You can use your own CDN, Cloudflare Stream, an R2 bucket, or any static site host—as long as the link begins with `https://`.
+2. (Optional but recommended) Generate a WebTorrent magnet so viewers can fall back to peer-to-peer delivery. Desktop apps like [WebTorrent Desktop](https://webtorrent.io/desktop/) or command-line tools can create the magnet for you.
+3. Double-check that either the hosted URL or the magnet (or both) is ready before you open the Upload modal.
+
+### Step 3: Share on bitvid
+
+1. Click "Share a Video" on bitvid to open the upload modal.
+2. In **Custom** mode, enter your title, paste the hosted HTTPS URL, and (optionally) add the magnet plus any `ws`/`xs` hints. Switch to the experimental **Cloudflare** quick upload mode if you want bitvid to push the file straight to your Cloudflare R2 bucket—have your Account ID, S3 Access Key ID, and Secret Access Key ready (the advanced toggle also accepts an API token, Zone ID, and base domain if you use them).
+3. Review the rest of the form: add a description and thumbnail, decide whether to allow comments, and set the NSFW or "For Kids" toggles to match your content. Explore the metadata section to fill in captions, duration, publish time, hashtags, participants, and other fields so first-time viewers have all the context they need.
+4. Click "Post" to publish once everything looks right.
+
+## Tips for Success
+
+- Keep WebTorrent Desktop running while sharing videos
+- Add eye-catching thumbnails to attract viewers
+- Write clear descriptions to help people find your content
+- After posting, open a card’s **More → Edit** action and use the [visibility toggle in the Edit Video modal](../components/edit-video-modal.html) to keep it private until you’re ready to share
+- Encrypted watch-history sync lives in the [Watch History view](history.html), where you can clear devices or pause tracking whenever you need.
+
+## Need Help?
+
+- Visit our [GitHub](https://github.com/PR0M3TH3AN/bitvid) page for technical support
+- Join our [community](https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe) to connect with other users
+- Report bugs to help us improve
+
+Welcome to bitvid – let's start sharing!
diff --git a/dist/content/docs/guides/index.md b/dist/content/docs/guides/index.md
new file mode 100644
index 00000000..0b4ab457
--- /dev/null
+++ b/dist/content/docs/guides/index.md
@@ -0,0 +1,7 @@
+# Guides
+
+Learn how to make the most of bitvid.
+
+## Available Guides
+
+- **[Upload Content](#view=docs&doc=upload-content)**: How to host and share your videos on bitvid.
diff --git a/dist/content/docs/guides/upload-content.md b/dist/content/docs/guides/upload-content.md
new file mode 100644
index 00000000..ff8665e8
--- /dev/null
+++ b/dist/content/docs/guides/upload-content.md
@@ -0,0 +1,70 @@
+# How to Upload Content
+
+bitvid is a decentralized platform, but for larger video files, we currently support **Cloudflare R2** as a storage backend. This allows you to upload files directly from your browser to a high-performance, affordable storage bucket.
+
+## Prerequisites
+
+- A **Cloudflare Account** (free to create).
+- An activated **R2 Plan** (there is a generous free tier, but you may need to add a payment method).
+
+## Step-by-Step Guide
+
+### 1. Create a Bucket & Enable Public Access
+
+1. Log in to your [Cloudflare Dashboard](https://dash.cloudflare.com/).
+2. Navigate to **R2** in the sidebar.
+3. Click **"Create Bucket"**.
+4. Give it a name (e.g., `my-bitvid-videos`) and click **"Create Bucket"**.
+5. Go to the **Settings** tab of your new bucket.
+6. Scroll down to **"Public Access"** and click **"Enable"** under "R2.dev subdomain".
+7. **Copy the Public Bucket URL** (it looks like `https://pub-xxxxxx.r2.dev`). You will need this later.
+
+### 2. Configure CORS
+
+To allow your browser to upload files directly to Cloudflare, you must allow Cross-Origin Resource Sharing (CORS).
+
+1. Still in your bucket's **Settings** tab, scroll down to **"CORS Policy"**.
+2. Click **"Add CORS Policy"** (or Edit).
+3. **Important:** Browser uploads use the AWS JavaScript SDK, which sends the `amz-sdk-invocation-id`, `amz-sdk-request`, and `x-amz-user-agent` headers. The simplest working setup is to allow all headers by setting `AllowedHeaders: ["*"]`.
+4. Paste the following JSON configuration and **explicitly list every allowed app origin** (the scheme, host, and port must match exactly):
+
+```json
+[
+ {
+ "AllowedOrigins": ["http://127.0.0.1:5500", "https://bitvid.network"],
+ "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
+ "AllowedHeaders": ["*"],
+ "ExposeHeaders": ["ETag", "Content-Length", "Content-Range", "Accept-Ranges"],
+ "MaxAgeSeconds": 3600
+ }
+]
+```
+> **Note:** Replace the `AllowedOrigins` values with the exact origins you use in development and production (the scheme and port must match exactly). Apply this policy on the **bucket’s S3 API endpoint**, not just the public URL or custom domain. Uploads go through the **S3 API endpoint** (`
.r2.cloudflarestorage.com`), and Cloudflare’s UI does **not** require adding `OPTIONS` to `AllowedMethods`.
+
+5. Click **"Save"**.
+
+### 3. Create an API Token
+
+1. Go back to the **R2 Overview** page.
+2. Click **"Manage R2 API Tokens"** (right sidebar).
+3. Click **"Create API Token"**.
+4. **Configure the token:**
+ - **Token name**: e.g., "bitvid-upload".
+ - **Permissions**: Select **"Object Read & Write"**. This is the minimal permission needed to upload and delete files.
+ - **Specific Bucket(s)**: Select the bucket you created in Step 1.
+ - **TTL**: "Forever".
+5. Click **"Create API Token"**.
+
+### 4. Configure bitvid
+
+1. Copy the **Access Key ID**, **Secret Access Key**, and your **Account ID** (found on the R2 Overview page).
+2. Return to the **Upload Video** modal in bitvid.
+3. Click **"Configure R2 Storage"**.
+4. Enter your:
+ - **Account ID**
+ - **Access Key ID**
+ - **Secret Access Key**
+ - **Public Bucket URL** (from Step 1)
+5. Click **"Verify & Save"**.
+
+bitvid will verify your credentials by uploading a small test file. Once verified, you are ready to upload!
diff --git a/dist/content/docs/overview.md b/dist/content/docs/overview.md
new file mode 100644
index 00000000..85766c79
--- /dev/null
+++ b/dist/content/docs/overview.md
@@ -0,0 +1,13 @@
+# Docs Overview
+
+Welcome to the bitvid documentation!
+
+Here you will find guides, community information, and details about our roadmap.
+
+## Sections
+
+- **[Getting Started](#view=docs&doc=getting-started)**: Learn how to watch and share videos.
+- **[About](#view=docs&doc=about)**: Learn more about bitvid's mission.
+- **[Guides](#view=docs&doc=guides)**: Detailed guides on using bitvid.
+- **[Community](#view=docs&doc=community)**: Community guidelines and links.
+- **[Roadmap](#view=docs&doc=roadmap)**: What's coming next.
diff --git a/dist/content/docs/roadmap.md b/dist/content/docs/roadmap.md
new file mode 100644
index 00000000..29b9a21a
--- /dev/null
+++ b/dist/content/docs/roadmap.md
@@ -0,0 +1,59 @@
+## Shipped
+
+- **Private video filtering** – VideoListView now hides private uploads from shared feeds while still rendering them for their owners, keeping private sharing contained to the uploader’s views.
+- **Edit & Upload modals** – Editing and publishing flows now rely on first-class modal forms with shared NIP-71 field management instead of browser pop-ups.
+- **Universal more/settings menus** – Video cards expose consistent “more” and owner settings menus with channel navigation, sharing, blocking, and reporting actions wired through dedicated renderers.
+- **Watch History view** – A dedicated watch history page ships with privacy messaging, pagination, relay sync, and local cache controls.
+- **Zap controls** – Channel profiles manage zap visibility, login gating, retry flows, and receipt rendering via the Lightning controller on the page.
+- **Source visibility filtering** – Lists now hide cards whose hosted URLs are offline unless their WebTorrent fallback is healthy, reusing the shared guard in `js/utils/cardSourceVisibility.js`.
+- **Video modal comments** – The video modal now surfaces in-context comment threads so viewers can follow discussions without leaving the player.
+- **Channel profile views** – `views/channel-profile.html` and `js/channelProfile.js` render dedicated channel landing pages with banners, follow stats, playlists, and contact links.
+- **Audience targeting toggles** – The [Upload modal](components/upload-modal.html) and [Edit Video modal](components/edit-video-modal.html) ship **NSFW** and **For Kids** toggles that map to the note’s moderation flags.
+- **Hashtag metadata repeater** – Upload metadata repeaters now support hashtag sets so creators can publish discovery tags alongside variants, captions, and participants.
+- **Dev/Live publishing fix** – Publishing honors the selected mode, preventing Dev-mode uploads from leaking into Live feeds.
+
+## Bug Fixes
+
+> ⚠️ **Note:** If you find a new bug thats not listed here. Please submit a [Bug Report](https://bitvid.network/?modal=bug).
+
+- Speed up loading in subscriptions. Save to local cache?
+- Fix slow back button issues on Firefox.
+- Add Amber login support for mobile.
+- Add support for "Playlist" lists and other custom lists (named whatever) and also a "Watch Later" list.
+- Add an "add to playlist" button to the edit button.
+- Add "add to watch later" option to edit button.
+- Fix autoplay broken on iPhone chrome.
+- Fix playback broken on Safari on iPhone.
+- **[14]** Get Watch History working reliably so the view stays in sync across devices and sessions.
+- **[15]** Fix Watch History bugs for various login methods to keep timelines aligned regardless of how users authenticate.
+- Update note spec v3 transition to include new fields that have been added like "has previous" or "videoRootID" or enentID if null.
+- Change "explore" view to "kids" view and add flag to all notes to see if they are for kids.
+- Add "seed" lists.
+- Fix sidebar media query settings on medium-sized screens. (tablet/laptops)
+- Fix various "text wrap" issues causing scroll left and right on profile and modal pages.
+
+## Feature Additions
+
+> ⚠️ **Note:** Have an idea for improving bitvid? We’d love to hear it! Please use [this form](https://bitvid.network/?modal=feature) to request new features or enhancements.
+
+- Allow users to set custom relay settings, stored in local cache.
+- Add a "Publish" step in the video editing process.
+- Add a relay note search surface with filters for post date, hashtags, title keywords, view counts, and the publishing account.
+- Add a mobile search control with a floating icon that expands into a full search field on small screens.
+- Improve event spec for migration to new versions. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md)
+- Migrate event spec to v3 and add support for Audio/Podcast content. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/03_bitvid_Enhanced_Nostr_Video_%26_Audio_Note_Specification_Version%203.md)
+- Add Block List, Subscription List, Playlist, and Reporting Specification. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/05_bitvid_Enhanced_Block_Subscription_%26_Reporting_Specification.md)
+- Allow multiple video resolutions with a selector in the video player. (v3 event spec needed)
+- Introduce a subscription mechanism with notifications.
+- Add zaps to videos, profiles, and comments.
+- Create a VRR (View, Rating, and Retention) Penalty Scoring system. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/07_bitvid_Enhanced_View_Rating_%26_Retention_Penalty_Scoring.md)
+- Expand visibility tooling around the shipped source guard to add operator overrides, richer status messaging, and better diagnostics when both URL and magnet sources fail.
+- Dynamic Home Page and Video Tracking Specification. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/08_bitvid_Enhanced_Dynamic_Home_Page_%26_Video_Tracking_Specification.md)
+- Add multi-language support for content and filtration. (v4?)
+- Create a settings menu for local account preferences, including relay, adult content, theme, and language.
+- Better integrate with other Nostr/torrent ecosystem. (NIP-35 + WebRTC Check Integration) [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/09_bitvid_Enhanced_NIP-35_%2B_WebRTC_Check_Integration.md)
+- **[16]** Add ability to write and send DMs so creators and viewers can coordinate privately.
+- **[17]** Add a "Live" live stream view (view only for now) that imports Zapstream notes and displays the live streams within the bitvid environment.
+- **[18]** Add ability to create and post livestreams to R2 storage so streamers can broadcast directly from bitvid.
+
+> ⚠️ **Note:** Your feedback helps us improve bitvid! Whether it’s a suggestion, a concern, or general thoughts on the platform, we’d love to hear from you. Please tell us what you think [with this form](https://bitvid.network/?modal=feedback).
diff --git a/dist/content/docs/toc.json b/dist/content/docs/toc.json
new file mode 100644
index 00000000..0a45b2d6
--- /dev/null
+++ b/dist/content/docs/toc.json
@@ -0,0 +1,64 @@
+{
+ "items": [
+ {
+ "title": "Overview",
+ "id": "overview",
+ "slug": "overview",
+ "path": "content/docs/overview.md",
+ "children": [
+ {
+ "title": "Getting Started",
+ "id": "getting-started",
+ "slug": "getting-started",
+ "path": "content/docs/getting-started.md"
+ },
+ {
+ "title": "About Bitvid",
+ "id": "about",
+ "slug": "about",
+ "path": "content/docs/about.md"
+ }
+ ]
+ },
+ {
+ "title": "Guides",
+ "id": "guides",
+ "slug": "guides",
+ "path": "content/docs/guides/index.md",
+ "children": [
+ {
+ "title": "Upload Content",
+ "id": "upload-content",
+ "slug": "upload-content",
+ "path": "content/docs/guides/upload-content.md"
+ }
+ ]
+ },
+ {
+ "title": "Community",
+ "id": "community",
+ "slug": "community",
+ "path": "content/docs/community/index.md",
+ "children": [
+ {
+ "title": "Community Guidelines",
+ "id": "community-guidelines",
+ "slug": "community-guidelines",
+ "path": "content/docs/community/community-guidelines.md"
+ },
+ {
+ "title": "Links",
+ "id": "links",
+ "slug": "links",
+ "path": "content/docs/community/links.md"
+ }
+ ]
+ },
+ {
+ "title": "Roadmap",
+ "id": "roadmap",
+ "slug": "roadmap",
+ "path": "content/docs/roadmap.md"
+ }
+ ]
+}
diff --git a/dist/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md b/dist/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md
new file mode 100644
index 00000000..58201aa6
--- /dev/null
+++ b/dist/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md
@@ -0,0 +1,268 @@
+# **bitvid: Enhanced Migration of Note Spec Logic**
+
+---
+
+## Overview
+
+Currently, logic related to the **video note specification** and how data is structured (version, `isPrivate`, encryption placeholders, and so on) is scattered across three files:
+
+1. **app.js**: Contains UI handling, form submissions, and some note structure (like `version`, `title`, `magnet`).
+2. **nostr client modules** (for example, `js/nostr/client.js`): Build and edit Nostr events (`publishVideo`, `editVideo`, `deleteVideo`). They also hold methods for “fake encryption” and “fake decryption,” among other utilities.
+3. **webtorrent.js**: Mostly focuses on torrent streaming but does not handle note logic directly. It rarely touches the note data, so it may not need major restructuring.
+
+The legacy `nostr.js` shim no longer exists; references to it map to the nostr client layer under `js/nostr/`.
+
+To isolate note-spec-related operations, you can create a new file (for example, `bitvidNoteSpec.js`). This file will have all the code that deals with creating or parsing your event content fields (version, magnet link encryption, etc.). Then `app.js` and the nostr client modules can import those functions.
+
+---
+
+## Goals
+
+- **Centralize the note specification**: Keep details like `version`, `deleted`, `isPrivate`, encryption, and decryption in one place.
+- **Simplify `app.js`**: Move form building/parsing to new spec-related functions. That way, `app.js` only handles UI and user actions.
+- **Streamline the nostr client layer**: Shift event creation logic into a function from the new note spec file. Nostr code then just calls that function, signs it, and publishes it.
+
+---
+
+## Proposed File: `bitvidNoteSpec.js`
+
+This new file could export:
+
+1. **Constants / Defaults** (for example, default `kind=30078`, default `version=2`, etc.).
+2. **Helper Functions**:
+ - `buildNewNote(data, pubkey)`: Takes basic form data and returns a fully structured Nostr note (an object) ready to be signed.
+ - `buildEditNote(originalEvent, updatedData)`: Merges old note content with new fields.
+ - `softDeleteNote(originalEvent)`: Constructs a note with `deleted = true`.
+ - `encryptMagnet(magnet)`, `decryptMagnet(magnet)`: Legacy pass-through helpers kept in case encryption returns; private listings now hide rather than encrypt.
+ - `validateNoteContent(content)`: Ensures essential fields (title, magnet, mode, etc.) are present and valid.
+
+Because you’re not implementing Version 3 yet, keep your existing version logic. If you do plan to adopt Version 3 later, the new file is where you’d add or change fields without scattering edits across multiple files.
+
+---
+
+### 1. Extracting Logic from `app.js`
+
+In `app.js`, you have code in the `handleSubmit` method that constructs a `formData` object with fields like `version`, `title`, `magnet`, and so on. You can:
+
+- Remove direct references to `version` or encryption from `handleSubmit`.
+- Instead, pass the raw form input to a function in `bitvidNoteSpec.js` named, for instance, `prepareNewNote(formInput, pubkey)`.
+
+Example:
+
+```js
+// bitvidNoteSpec.js (simplified example)
+export function prepareNewNote(formInput, pubkey) {
+ // Combine user inputs with defaults
+ const isPrivate = formInput.isPrivate === true;
+ const finalMagnet = isPrivate
+ ? encryptMagnet(formInput.magnet) // currently a pass-through; hiding happens at the feed layer
+ : formInput.magnet;
+
+ return {
+ kind: 30078,
+ pubkey,
+ created_at: Math.floor(Date.now() / 1000),
+ tags: [
+ ["t", "video"],
+ ["d", generateUniqueDTag()]
+ ],
+ content: JSON.stringify({
+ version: formInput.version ?? 2,
+ deleted: false,
+ isPrivate,
+ title: formInput.title,
+ magnet: finalMagnet,
+ thumbnail: formInput.thumbnail,
+ description: formInput.description,
+ mode: formInput.mode
+ })
+ };
+}
+
+// app.js (handleSubmit excerpt)
+import { prepareNewNote } from "./bitvidNoteSpec.js";
+
+async handleSubmit(e) {
+ e.preventDefault();
+
+ if (!this.pubkey) {
+ this.showError("Please login to post a video.");
+ return;
+ }
+
+ const formInput = {
+ version: 2,
+ title: document.getElementById("title")?.value.trim() || "",
+ magnet: document.getElementById("magnet")?.value.trim() || "",
+ thumbnail: document.getElementById("thumbnail")?.value.trim() || "",
+ description: document.getElementById("description")?.value.trim() || "",
+ mode:
+ (document.getElementById("mode")?.value || "")
+ .trim()
+ .toLowerCase() === "dev"
+ ? "dev"
+ : "live",
+ isPrivate: this.isPrivateCheckbox.checked
+ };
+
+ try {
+ const eventToPublish = prepareNewNote(formInput, this.pubkey);
+ await nostrClient.publishNote(eventToPublish);
+ this.submitForm.reset();
+ ...
+ } catch (err) {
+ ...
+ }
+}
+```
+
+Now `handleSubmit` is only handling the UI, while actual note-building moves to `bitvidNoteSpec.js`.
+
+---
+
+### 2. Extracting Logic from the nostr client layer
+
+In the nostr client modules, you have methods like `publishVideo`, `editVideo`, and `deleteVideo`. They build the note content, sign it, and publish it. You can simplify them:
+
+- **Rename** them to something more generic (e.g., `publishNote`, `updateNote`, `deleteNote`) if that aligns better with Nostr usage.
+- **Import** helper functions from `bitvidNoteSpec.js` to build or edit the actual content. That way, the nostr client layer doesn’t need to know about `version`, `deleted`, or encryption details.
+
+For example, you might do this:
+
+```js
+// nostr client module
+import { buildEditNote, buildDeleteNote } from "./bitvidNoteSpec.js";
+
+class NostrClient {
+ ...
+ async editVideo(originalEvent, updatedData, pubkey) {
+ // 1) Build the note object using shared function
+ const eventToPublish = buildEditNote(originalEvent, updatedData);
+
+ // 2) Sign and publish
+ const signedEvent = await window.nostr.signEvent(eventToPublish);
+ ...
+ }
+
+ async deleteVideo(originalEvent, pubkey) {
+ const eventToPublish = buildDeleteNote(originalEvent);
+ const signedEvent = await window.nostr.signEvent(eventToPublish);
+ ...
+ }
+}
+```
+
+By delegating the actual note-building to `buildEditNote` and `buildDeleteNote`, you keep the nostr client layer focused on signing and relaying events.
+
+---
+
+### 3. Minimal Impact on `webtorrent.js`
+
+`webtorrent.js` deals mostly with streaming and service workers. It does not appear to handle note building or encryption. You likely do not need to change anything there for this refactor, unless you want to move `fakeDecrypt` references. If you do, just import the spec’s encryption/decryption functions where needed.
+
+---
+
+## Step-by-Step Migration Plan
+
+1. **Create `bitvidNoteSpec.js`:**
+ - Place all code that deals with constructing, editing, or deleting your media note events.
+ - Include minimal encryption/decryption functions if they are purely for magnet links.
+
+2. **Update `app.js`:**
+ - Remove direct references to building the final note object in `handleSubmit`.
+ - Instead, gather user inputs, call a helper function from `bitvidNoteSpec.js` to produce the final note object, then pass that object to `nostrClient.publishNote` (or a similar method).
+
+3. **Update the nostr client modules:**
+ - Rename or refactor `publishVideo`, `editVideo`, and `deleteVideo` to call your new helper methods from `bitvidNoteSpec.js`.
+ - Keep the Nostr signing and publishing logic inside the client layer.
+
+4. **Verify Data Flow:**
+ - Confirm that after form submission, the final event object is built in `bitvidNoteSpec.js`, returned to `app.js`, and forwarded to `nostrClient`.
+ - Ensure you can still subscribe to events and parse them without issues.
+
+5. **Remove Redundant Code:**
+ - Delete any leftover duplication in `app.js` or the nostr client modules relating to magnet encryption or note structuring.
+
+6. **Test Thoroughly:**
+ - Create, edit, and delete events to ensure everything behaves the same.
+ - Confirm that private videos stay hidden from shared grids as expected.
+
+---
+
+## Example File Outline for `bitvidNoteSpec.js`
+
+Below is a small outline showing how you might organize the new file. The actual details will depend on your existing code and future needs:
+
+```js
+// bitvidNoteSpec.js
+
+// Legacy placeholder kept for future encryption experiments (currently returns the raw magnet)
+export function encryptMagnet(magnet) {
+ return magnet; // private cards are hidden instead of encrypted
+}
+
+export function decryptMagnet(magnet) {
+ return magnet; // private cards are hidden instead of encrypted
+}
+
+function generateUniqueDTag() {
+ return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+// Build a brand-new note
+export function prepareNewNote(formInput, pubkey) {
+ const isPrivate = formInput.isPrivate === true;
+ const finalMagnet = isPrivate
+ ? encryptMagnet(formInput.magnet) // currently a pass-through; hiding happens at the feed layer
+ : formInput.magnet;
+
+ return {
+ kind: 30078,
+ pubkey,
+ created_at: Math.floor(Date.now() / 1000),
+ tags: [
+ ["t", "video"],
+ ["d", generateUniqueDTag()]
+ ],
+ content: JSON.stringify({
+ version: formInput.version ?? 2,
+ deleted: false,
+ isPrivate,
+ title: formInput.title,
+ magnet: finalMagnet,
+ thumbnail: formInput.thumbnail,
+ description: formInput.description,
+ mode: formInput.mode ?? "live"
+ })
+ };
+}
+
+// Build an edited note using original event data
+export function buildEditNote(originalEvent, updatedData) {
+ // parse old content
+ // combine with new fields
+ // handle legacy visibility toggles / future encryption experiments
+ // return the final event object
+}
+
+// Build a deleted note
+export function buildDeleteNote(originalEvent) {
+ // parse old content
+ // set deleted=true, remove magnet, etc.
+ // return the final event object
+}
+
+// Validate content structure
+export function isValidNoteContent(content) {
+ // check for required fields
+ return true;
+}
+```
+
+By keeping these details in a single file, you won’t have to search through `app.js` or the nostr client modules whenever you need to tweak the note structure.
+
+---
+
+## Conclusion
+
+Shifting all note spec logic into a dedicated file will make your codebase cleaner and set you up for easier upgrades down the road. You can proceed with the steps above, ensuring you keep each file (UI, Nostr communication, torrent streaming) focused on its primary role. Once done, you’ll be able to implement higher-level changes (like Version 3 or additional content fields) in one place without sifting through unrelated code.
\ No newline at end of file
diff --git a/dist/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md b/dist/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md
new file mode 100644
index 00000000..1ab6400a
--- /dev/null
+++ b/dist/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md
@@ -0,0 +1,296 @@
+# **bitvid: Enhanced Nostr Video/Audio Note Specification: Version 3**
+
+This specification updates the previous version (Version 2) and introduces:
+
+1. **videoRootId**: A dedicated field in the JSON content to group related edits and deletes under one “root” post.
+2. **Support for Audio/Podcast**: Additional fields for music/podcast metadata.
+3. **Adult Content, Multi-Category, and Extended Metadata**: Optional fields to handle specialized use cases.
+4. **Backward Compatibility**: Clients implementing Version 2 can still display the basic fields.
+
+---
+
+## **1. Overview**
+
+Nostr posts of **kind = 30078** are used for sharing media (videos, audio, podcasts, etc.). The JSON payload goes into the `content` field, while tags array can store quick references like `["t", "video"]` or `["d", ""]`.
+
+### **Key Concepts**
+
+- **videoRootId**: A unique identifier stored in the `content` JSON.
+ - Ensures multiple edits or a delete event are recognized as referring to the same underlying post.
+ - If missing (legacy posts), clients may fall back to the d-tag or event ID to group events, but using `videoRootId` is strongly recommended for consistent overshadow logic.
+- **Backward Compatibility**: All newly introduced fields are optional. Version 2 clients see fields like `title`, `magnet`, `description`, but ignore new fields such as `adult`, `audioQuality`, etc.
+
+---
+
+## **2. Event Structure**
+
+A typical event:
+
+| **Field** | **Type** | **Description** |
+| ------------ | ------------- | ------------------------------------------------------------------------------------------ |
+| `kind` | Integer | Fixed at `30078` for these media notes. |
+| `pubkey` | String | Creator’s pubkey in hex. |
+| `created_at` | Integer | Unix timestamp (seconds). |
+| `tags` | Array | Includes metadata such as `["t", "video"]` or `["t", "music"]` and `["d", ""]`. |
+| `content` | String (JSON) | JSON specifying metadata (see table below). |
+
+---
+
+## **3. Version 3 Content JSON**
+
+| **Field** | **Type** | **Description** |
+| --------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| `videoRootId` | String (optional) | A stable root ID used to link multiple versions (edits) and a delete event together. **Recommended** for overshadow logic. |
+| `version` | Integer | Now set to `3`. |
+| `deleted` | Boolean | `true` marks the post as “soft deleted.” |
+| `isPrivate` | Boolean | Indicates the card should stay off shared grids and remain visible only to its owner; payloads stay plaintext. |
+| `title` | String | Display title for the media. |
+| `magnet` | String | Magnet link for primary media (still stored in plaintext even when `isPrivate = true`). |
+| `extraMagnets` | Array (optional) | Additional magnet links (e.g., multiple resolutions). |
+| `thumbnail` | String (optional) | URL or magnet link to a thumbnail image. |
+| `description` | String (optional) | A textual description. |
+| `mode` | String | Typically `live` or `dev`. |
+| `adult` | Boolean (optional) | `true` if content is adult-only. Default: `false` or omitted. |
+| `categories` | Array (optional) | Array of categories, e.g. `["comedy", "music"]`. |
+| `language` | String (optional) | Language code (e.g. `"en"`, `"es"`). |
+| `payment` | String (optional) | Monetization field (e.g. a Lightning address). |
+| `i18n` | Object (optional) | Internationalization map (e.g. `{"title_en": "...", "description_es": "..."}`). |
+| `encryptedMeta` | Boolean (optional) | Legacy flag from earlier encryption experiments; leave `false` unless a future spec revives encrypted metadata. |
+| **Audio/Podcast-Specific Fields** | | |
+| `contentType` | String (optional) | E.g., `"video"`, `"music"`, `"podcast"`, `"audiobook"`. |
+| `albumName` | String (optional) | Name of the album (for music). |
+| `trackNumber` | Integer (optional) | Track number in an album. |
+| `trackTitle` | String (optional) | Track title if different from `title`. |
+| `podcastSeries` | String (optional) | Name of the podcast series. |
+| `seasonNumber` | Integer (optional) | Season number for a podcast. |
+| `episodeNumber` | Integer (optional) | Episode number for a podcast series. |
+| `duration` | Integer (optional) | Duration in seconds (useful for audio or video players). |
+| `artistName` | String (optional) | Artist or presenter name. |
+| `contributors` | Array (optional) | List of additional contributors, e.g. `[{"name": "X", "role": "Producer"}]`. |
+| `audioQuality` | Array (optional) | Array of objects indicating different audio bitrates/formats, each with a magnet link. |
+| `playlist` | Array (optional) | For multi-track or multi-episode sets, e.g. `[ "magnet1", "magnet2" ]`. |
+
+> **Note**: All fields except `version`, `deleted`, `title`, `magnet`, and `videoRootId` are optional. If an older post lacks `videoRootId`, fallback grouping may rely on the `d` tag or event ID.
+
+---
+
+## **4. Using `videoRootId`**
+
+- **Purpose**: Ensures all edits and a final delete event share the same “root.”
+- **Edit**: Keep the same `videoRootId` in the new content so clients know it’s an update of the same item.
+- **Delete**: Reuse the same `videoRootId` (and typically the same `d` tag). Mark `deleted = true` to overshadow the old event.
+
+**Fallback**: Legacy or older notes might not have a `videoRootId`. Clients can group them by `["d", ""]` or treat the old event’s own ID as its “root.” However, for new posts, **always** set `videoRootId`.
+
+---
+
+## **5. Example Post: Version 3 (Video)**
+
+```jsonc
+{
+ "kind": 30078,
+ "pubkey": "npub1...",
+ "created_at": 1700000000,
+ "tags": [
+ ["t", "video"],
+ ["d", "my-unique-handle"]
+ ],
+ "content": "{
+ \"videoRootId\": \"root-1678551042-abc123\",
+ \"version\": 3,
+ \"deleted\": false,
+ \"isPrivate\": false,
+ \"adult\": true,
+ \"categories\": [\"comedy\", \"pranks\"],
+ \"title\": \"Funny Prank Video\",
+ \"magnet\": \"magnet:?xt=urn:btih:examplehash\",
+ \"extraMagnets\": [
+ \"magnet:?xt=urn:btih:examplehashHD\",
+ \"magnet:?xt=urn:btih:examplehashMobile\"
+ ],
+ \"thumbnail\": \"https://example.com/thumb.jpg\",
+ \"description\": \"An adult-oriented prank video.\",
+ \"mode\": \"live\",
+ \"language\": \"en\",
+ \"payment\": \"alice@getalby.com\",
+ \"i18n\": {
+ \"title_es\": \"Video de broma chistosa\",
+ \"description_es\": \"Un video de bromas para adultos.\"
+ }
+ }"
+}
+```
+
+- **videoRootId**: `root-1678551042-abc123` ensures future edits or deletes reference the same item.
+- If `deleted = true`, the client sees it as a soft delete overshadowing the original.
+
+---
+
+## **6. Example Post: Version 3 (Audio)**
+
+```jsonc
+{
+ "kind": 30078,
+ "pubkey": "npub1...",
+ "created_at": 1700000001,
+ "tags": [
+ ["t", "music"],
+ ["d", "my-song-handle"]
+ ],
+ "content": "{
+ \"videoRootId\": \"root-1678551042-xyz999\",
+ \"version\": 3,
+ \"deleted\": false,
+ \"isPrivate\": false,
+ \"contentType\": \"music\",
+ \"title\": \"Amazing Track\",
+ \"trackTitle\": \"Amazing Track\",
+ \"albumName\": \"Great Album\",
+ \"trackNumber\": 1,
+ \"artistName\": \"Awesome Artist\",
+ \"duration\": 300,
+ \"magnet\": \"magnet:?xt=urn:btih:examplehash\",
+ \"audioQuality\": [
+ {
+ \"quality\": \"lossless\",
+ \"magnet\": \"magnet:?xt=urn:btih:losslessHash\"
+ },
+ {
+ \"quality\": \"mp3\",
+ \"magnet\": \"magnet:?xt=urn:btih:mp3Hash\"
+ }
+ ],
+ \"description\": \"A track from the Great Album.\",
+ \"categories\": [\"music\", \"pop\"],
+ \"contributors\": [
+ { \"name\": \"John Doe\", \"role\": \"Producer\" },
+ { \"name\": \"Jane Smith\", \"role\": \"Writer\" }
+ ]
+ }"
+}
+```
+
+- **videoRootId**: `root-1678551042-xyz999` used to link edits/deletes.
+
+---
+
+## **7. Tagging**
+
+- `["t", "video"]` or `["t", "music"]` for quick type references.
+- `["d", ""]` for a stable “address” pointer.
+- You can store adult flags or categories in tags, e.g. `["adult", "true"]` or `["category", "comedy"]`.
+- However, storing them inside `content` (e.g. `adult=true` or `categories=["comedy"]`) is generally recommended so older clients can ignore them gracefully.
+
+---
+
+## **8. Handling Edits and Deletes**
+
+### **8.1 Edits**
+
+1. **videoRootId**: Keep the same `videoRootId` to overshadow the previous version.
+2. **version**: Bump from `2` → `3` or `3` → a higher sub-version if you wish to track changes.
+3. **tags**: Typically reuse `["d", ""]` or create a new d-tag. The important part is to keep `videoRootId` consistent.
+
+### **8.2 Deletion**
+
+1. **deleted = true**: Mark the item as deleted in the `content` JSON.
+2. **Clear** sensitive fields (`magnet`, `description`, etc.) if you do not want them mirrored in older clients.
+3. **videoRootId**: Must remain the same as the original so clients remove/overshadow the old item.
+4. **subscribeVideos** Logic:
+ ```js
+ if (video.deleted) {
+ // remove from activeMap or overshadow the old entry
+ }
+ ```
+5. **fetchVideos** Logic:
+ ```js
+ for (const [id, video] of allEvents.entries()) {
+ if (video.deleted) continue; // skip deleted
+ // ...
+ }
+ ```
+
+---
+
+## **9. Filtering Logic**
+
+1. **Adult Content**: If `adult = true`, clients typically hide the post unless the user enables adult content in settings.
+2. **Categories**: Provide optional grouping or searching by `categories`.
+3. **Language**: If specified, clients can filter by language.
+4. **Privacy handling**: If `isPrivate = true`, clients should hide the card from shared grids instead of attempting client-side decryption.
+
+---
+
+## **10. Submission Flow**
+
+1. **Client Form**: Title, magnet link, optional category checkboxes, adult toggle, etc.
+2. **videoRootId**: For new posts, generate a new root ID. For edits, reuse the old post’s root ID.
+3. **Publish**:
+ - `kind = 30078`
+ - `content` → JSON with `videoRootId`, `version=3`, `title`, `magnet`, etc.
+ - `tags` → e.g., `["t","video"]`, `["d","my-handle"]`.
+4. **Visibility**: If `adult=true`, hide from minors or default searches. If `deleted=true`, overshadow old entry.
+
+---
+
+## **11. Example “Delete” Flow**
+
+1. **Original Post** (not deleted):
+ ```json
+ {
+ "content": "{
+ \"videoRootId\": \"root-1234\",
+ \"version\": 3,
+ \"deleted\": false,
+ \"title\": \"My Video\",
+ \"magnet\": \"magnet:?xt=hash\"
+ // ...
+ }"
+ }
+ ```
+2. **Delete Post** (new event):
+ ```jsonc
+ {
+ "kind": 30078,
+ "pubkey": "...",
+ "tags": [
+ ["t","video"],
+ ["d","my-handle"] // same d-tag
+ ],
+ "content": "{
+ \"videoRootId\": \"root-1234\", // same root as original
+ \"version\": 3,
+ \"deleted\": true,
+ \"title\": \"My Video\",
+ \"magnet\": \"\", // blank or removed
+ \"description\": \"Video was deleted by creator.\"
+ }"
+ }
+ ```
+3. **subscribeVideos** sees `deleted=true` and overshadow logic removes the old item from active view.
+
+---
+
+## **12. Backward Compatibility**
+
+- **Version 2** fields remain recognized: `title`, `magnet`, `mode`, etc.
+- **Older Clients**: Ignore fields like `videoRootId`, `categories`, `adult`, etc.
+- **When Upgrading**: If you add `videoRootId` or adult flags to an older post, older clients still display basic info but won’t filter on the new fields.
+
+---
+
+## **13. Summary**
+
+**Version 3** is a superset of previous versions, adding:
+
+1. **videoRootId** for overshadow logic and grouping multi-edit threads.
+2. **Adult content flag**, multi-category, i18n, and other optional fields.
+3. **Audio/podcast support**: fields like `contentType = "music"`, `podcastSeries`, `episodeNumber`, and `playlist`.
+
+Clients that implement these features can sort, filter, or display richer media experiences while remaining compatible with older Nostr note readers.
+
+---
+
+**End of Document**
+
+This expanded spec ensures that **videoRootId** is used consistently, clarifies how to handle adult content, and extends the data model for new media types. By following this Version 3 guidance, you’ll maintain backward compatibility while enabling advanced features for media sharing on Nostr.
diff --git a/dist/content/roadmap/04_bitvid_Enhanced_Profile_Channel_Views_Specification.md b/dist/content/roadmap/04_bitvid_Enhanced_Profile_Channel_Views_Specification.md
new file mode 100644
index 00000000..5afc5887
--- /dev/null
+++ b/dist/content/roadmap/04_bitvid_Enhanced_Profile_Channel_Views_Specification.md
@@ -0,0 +1,149 @@
+# **bitvid: Enhanced Profile/Channel Views Specification**
+
+## **Overview**
+We aim to integrate a multi-view system within `index.html`, allowing smooth navigation between views like the home grid and user profiles. This will leverage JavaScript for dynamic DOM manipulation, maintaining a consistent layout (header, footer, future sidebar) across views.
+
+---
+
+## **Structure and Navigation**
+### **Navigation Logic**
+1. **Default View (Home Grid):**
+ - A grid showcasing all videos.
+ - Acts as the primary landing page.
+
+2. **Profile View:**
+ - A user's profile page containing:
+ - Profile banner and information.
+ - Action buttons (Subscribe, Share, Block).
+ - Videos grid (only videos posted by the user).
+
+3. **Templating System:**
+ - Use dynamic DOM manipulation to switch views without reloading the page.
+ - Structure each "view" as a reusable container rendered based on URL or state.
+
+---
+
+## **Dynamic Routing**
+### **Route Handling**
+- Use the `hashchange` or `pushState` method to detect and handle navigation.
+- Route format:
+ - `/#home`: Default home grid view.
+ - `/#profile/{npub}`: Profile view of a specific user, determined by `{npub}`.
+
+### **Implementation Plan**
+- Use JavaScript to parse the `window.location.hash` or `window.location.pathname` and determine which view to render.
+- Example:
+ ```javascript
+ const renderView = () => {
+ const hash = window.location.hash;
+ if (hash.startsWith("#profile")) {
+ const npub = hash.split("/")[1];
+ loadProfileView(npub);
+ } else {
+ loadHomeGrid();
+ }
+ };
+
+ window.addEventListener("hashchange", renderView);
+ window.addEventListener("load", renderView);
+ ```
+
+---
+
+## **View Templates**
+### **Template System**
+1. **Home Grid Template:**
+ - Container: `#homeGrid`.
+ - Dynamically populate the grid with all videos fetched from Nostr relays.
+
+2. **Profile Template:**
+ - Container: `#profileView`.
+ - Display user details and their videos based on the `npub`.
+
+3. **Shared Components:**
+ - Header, footer, and optional sidebar remain static.
+ - Use `display: none` and `block` to toggle view visibility.
+
+### **HTML Structure**
+Add placeholders for different views in `index.html`:
+```html
+
+
+
+
+
+```
+
+---
+
+## **Functionality**
+### **Profile Fetching**
+- Use Nostr protocol (`kind 0`) to fetch profile details.
+- Display:
+ - Profile picture, name, bio, and website link.
+ - Action buttons for Subscribe, Share, and Block.
+
+### **Videos Fetching**
+- Fetch videos (`kind 30078`) filtered by the user's `npub`.
+
+### **Subscriptions**
+- Use `kind 30000` to manage the subscription follow set:
+ - Subscribe: Add user to the list.
+ - Unsubscribe: Remove user.
+
+### **Implementation Example**
+```javascript
+const loadProfileView = async (npub) => {
+ // Fetch profile details
+ const profileEvent = await nostrClient.fetchProfile(npub);
+ const { name, picture, about } = profileEvent.content;
+
+ // Update profile view
+ document.getElementById("profileImage").src = picture;
+ document.getElementById("profileName").textContent = name;
+ document.getElementById("profileBio").textContent = about;
+
+ // Fetch and display user videos
+ const userVideos = await nostrClient.fetchVideosByNpub(npub);
+ renderVideos(userVideos, "profileVideos");
+
+ // Show profile view
+ showView("profileView");
+};
+
+const showView = (viewId) => {
+ document.querySelectorAll(".view").forEach((view) => {
+ view.classList.toggle("hidden", view.id !== viewId);
+ });
+};
+```
+
+---
+
+## **Unique Profile URLs**
+- Format: `https://bitvid.network/#profile/{npub}`.
+- Navigation to this URL will directly load the profile view.
+- Use `history.pushState` or `location.hash` to set the URL.
+
+---
+
+## **Next Steps**
+- **Integrate Dynamic Routing**: Update `app.js` with route handling for views.
+- **Refactor HTML**: Add placeholders for views in `index.html`.
+- **Build Profile Fetching Logic**: Use Nostr client to fetch and display user details dynamically.
+- **Enhance UX**: Smooth transitions between views with CSS animations.
+
+This setup achieves a modular SPA-like architecture while keeping development lightweight and aligned with your project’s goals.
\ No newline at end of file
diff --git a/dist/content/roadmap/05_bitvid_Enhanced_Block_Subscription_&_Reporting_Specification.md b/dist/content/roadmap/05_bitvid_Enhanced_Block_Subscription_&_Reporting_Specification.md
new file mode 100644
index 00000000..1afe68ba
--- /dev/null
+++ b/dist/content/roadmap/05_bitvid_Enhanced_Block_Subscription_&_Reporting_Specification.md
@@ -0,0 +1,287 @@
+# **bitvid: Enhanced Block, Subscription, and Reporting Specification**
+
+This document describes how to implement **Block Lists**, **Subscription Lists**, and **Reporting** (NIP-56) for a Nostr-based video platform such as bitvid. It covers how users can manage their own moderation tools and how the platform can apply additional checks.
+
+---
+
+## Table of Contents
+
+1. [Subscription List Specification](#subscription-list-specification)
+ 1.1 [Purpose](#purpose)
+ 1.2 [Event Kind](#event-kind)
+ 1.3 [JSON Structure](#json-structure)
+ 1.4 [Example](#example)
+ 1.5 [Features](#features)
+
+2. [Block List Specification](#block-list-specification)
+ 2.1 [Purpose](#purpose-1)
+ 2.2 [Event Kind](#event-kind-1)
+ 2.3 [JSON Structure](#json-structure-1)
+ 2.4 [Examples](#examples)
+ 2.5 [Features](#features-1)
+
+3. [Reporting with NIP-56](#reporting-with-nip-56)
+ 3.1 [Overview](#overview)
+ 3.2 [Report Types](#report-types)
+ 3.3 [Example Events](#example-events)
+ 3.4 [Client and Relay Behavior](#client-and-relay-behavior)
+
+4. [Implementation Details](#implementation-details)
+ 4.1 [Replaceable Events](#replaceable-events)
+ 4.2 [Encryption](#encryption)
+ 4.3 [Fetching User Lists](#fetching-user-lists)
+ 4.4 [Pushing Updates to Relays](#pushing-updates-to-relays)
+
+5. [UI Integration](#ui-integration)
+ 5.1 [Subscription Management](#subscription-management)
+ 5.2 [Block Management](#block-management)
+ 5.3 [Report Management](#report-management)
+
+6. [Future Considerations](#future-considerations)
+
+---
+
+## Subscription List Specification
+
+### Purpose
+A **Subscription List** lets users follow video creators independently of their main “following” list on Nostr. It supports categorization and can be made private via encryption.
+
+### Event Kind
+- **Kind**: `30000`
+- **Description**: “Video Subscription Follow Set” aligned with [NIP-51 follow sets](../../docs/nips/51.md#sets)
+
+### JSON Structure
+**Public Tags**
+- `["p", ]`: Public keys of creators to follow
+- `["t", ]`: Optional categories (e.g., “comedy,” “music”)
+
+**Private Tags**
+- Encrypted list of subscriptions using NIP-04
+
+**Metadata**
+- Additional information like category names, custom labels, etc.
+
+### Example
+```json
+{
+ "kind": 30000,
+ "tags": [
+ ["d", "favorite-creators"],
+ ["p", "npub1creator1pubkey"],
+ ["p", "npub1creator2pubkey"],
+ ["t", "comedy"],
+ ["t", "science"]
+ ],
+ "content": "Encrypted list content for private subscriptions",
+ "created_at": 1735689600,
+ "pubkey": "your-public-key",
+ "id": "event-id"
+}
+```
+
+### Features
+1. **Categorization**
+ Users can group subscribed creators by genres or topics.
+2. **Privacy Options**
+ Private subscriptions can be hidden by encrypting tags.
+3. **Replaceable Event**
+ Users can update their list by publishing a new event with the same `d` tag (e.g., `["d","favorite-creators"]`) and a later `created_at`.
+
+---
+
+## Block List Specification
+
+### Purpose
+A **Block List** gives users the ability to mute or block specific creators or users. It supports both public reasons (tags) and private reasons (encrypted content).
+
+### Event Kind
+- **Kind**: `10001`
+- **Description**: “Block or Mute List” (per NIP-51)
+
+### JSON Structure
+**Public Tags**
+- `["p", ]`: Public keys of blocked users
+- `["r", ]`: Optional reasons (spam, harassment, etc.)
+
+**Private Tags**
+- Encrypted details for blocking, using NIP-04
+
+### Examples
+
+#### Public Block List
+```json
+{
+ "kind": 10001,
+ "tags": [
+ ["p", "npub1blockeduser1pubkey", "reason", "spam"],
+ ["p", "npub1blockeduser2pubkey", "reason", "harassment"]
+ ],
+ "content": "",
+ "created_at": 1735689600,
+ "pubkey": "your-public-key",
+ "id": "event-id"
+}
+```
+
+#### Private Block List
+```json
+{
+ "kind": 10001,
+ "tags": [
+ ["p", "npub1blockeduser1pubkey"],
+ ["p", "npub1blockeduser2pubkey"]
+ ],
+ "content": "Encrypted reasons for blocking (e.g., personal dispute info)",
+ "created_at": 1735689600,
+ "pubkey": "your-public-key",
+ "id": "event-id"
+}
+```
+
+### Features
+1. **Integration**
+ - Offer a “Block/Unblock” button in the UI.
+ - Provide a page to manage blocks.
+2. **Filtering**
+ - Automatically exclude blocked users from feed results.
+3. **Categorization**
+ - Tag reasons for blocking, such as spam or harassment.
+4. **Privacy Options**
+ - Keep certain block reasons encrypted if needed.
+
+---
+
+## Reporting with NIP-56
+
+### Overview
+NIP-56 introduces a **kind `1984`** event that flags content or profiles as objectionable. It’s a flexible way to let users or relays see reports and decide on any actions.
+
+### Report Types
+The `p` tag references a pubkey, and the `e` tag references a note. The third element of the tag can be:
+- `nudity`
+- `malware`
+- `profanity`
+- `illegal`
+- `spam`
+- `impersonation`
+- `other`
+
+### Example Events
+
+```jsonc
+// Reporting a user for nudity
+{
+ "kind": 1984,
+ "tags": [
+ ["p", "", "nudity"]
+ ],
+ "content": "Optional comment or additional info.",
+ "created_at": 1735689600,
+ "pubkey": "your-public-key",
+ "id": "report-event-id"
+}
+
+// Reporting a note as illegal
+{
+ "kind": 1984,
+ "tags": [
+ ["e", "", "illegal"],
+ ["p", ""]
+ ],
+ "content": "User is breaking local laws.",
+ "created_at": 1735689600,
+ "pubkey": "your-public-key",
+ "id": "report-event-id"
+}
+```
+
+### Client and Relay Behavior
+- **Clients**
+ - May choose to highlight or hide reported notes if enough trusted users report them.
+ - Could display “flagged content” warnings based on the user’s web-of-trust.
+- **Relays**
+ - Not mandated to do anything automatically.
+ - An admin could manually block content if a trusted source files many valid reports.
+
+---
+
+## Implementation Details
+
+### Replaceable Events
+- **Subscription Lists** (`30000`) and **Block Lists** (`10001`) can be implemented as replaceable events by using a deterministic `d` tag.
+- For example, `["d","my-blocklist"]` ensures older events with the same `d` are replaced when new ones arrive.
+
+### Encryption
+- Use [NIP-04](https://github.com/nostr-protocol/nips/blob/master/04.md) for any private or sensitive data in `content` or tags.
+- Public reasons for blocking or reporting can remain in tags or clear text.
+
+### Fetching User Lists
+1. **On Login**
+ - Query each relay for events matching:
+ ```jsonc
+ {
+ "kinds": [10001, 30000],
+ "authors": []
+ }
+ ```
+ - Merge and deduplicate block/subscription lists from the resulting events.
+2. **Processing**
+ - For blocklists, unify all “p” tags into a single set of blocked pubkeys.
+ - For subscriptions, unify “p” tags or categories if the user merges multiple lists.
+
+### Pushing Updates to Relays
+1. **Create Event**
+ - Include kind, pubkey, timestamp, tags, and optional content.
+2. **Sign Event**
+ - Use `window.nostr.signEvent` or your own signing library.
+3. **Publish**
+ - Send the signed event to each configured relay.
+ - Example in pseudocode:
+ ```javascript
+ const signedEvent = await signEvent(myEvent);
+ for (const relay of relays) {
+ pool.publish([relay], signedEvent);
+ }
+ ```
+
+---
+
+## UI Integration
+
+### Subscription Management
+- **List View**
+ - Show subscribed creators with categories if applicable.
+- **Add/Remove**
+ - Allow users to add an `npub` to their list.
+ - Save as a new replaceable event.
+
+### Block Management
+- **Block/Unblock Button**
+ - Quick action to add or remove a pubkey from the user’s blocklist.
+- **Blocklist Editor**
+ - Display current blocks.
+ - Optionally show reasons (public or private).
+ - Publish changes via a new replaceable event.
+
+### Report Management
+- **Report Button**
+ - Attached to each video or note.
+ - Triggers a “kind:1984” event with the chosen category (spam, nudity, etc.).
+- **Displaying Reports**
+ - Optionally show how many “trusted friends” have reported a user/note.
+ - Let users decide whether to hide or blur content with certain flags.
+
+---
+
+## Future Considerations
+1. **Paid Subscriptions**
+- Could layer subscription tiers on top of `30000` events.
+2. **Global Block Lists**
+ - Let users publish or subscribe to a curated blocklist (or share one in a group).
+3. **Web of Trust**
+ - Filter reports based on which reporters a user trusts.
+
+---
+
+### Summary
+By leveraging Nostr event kinds (`30000` for subscriptions, `10001` for blocks, and `1984` for reports), bitvid can maintain a decentralized, user-controlled moderation system. Users can sync their lists across devices through relays, while administrators can choose how to handle flagged content on a platform level. This approach keeps moderation flexible and transparent.
diff --git a/dist/content/roadmap/06_bitvid_Enhanced_Video_Comment_System_Specification.md b/dist/content/roadmap/06_bitvid_Enhanced_Video_Comment_System_Specification.md
new file mode 100644
index 00000000..6889911b
--- /dev/null
+++ b/dist/content/roadmap/06_bitvid_Enhanced_Video_Comment_System_Specification.md
@@ -0,0 +1,268 @@
+# **bitvid: Enhanced Video Comment System Specification**
+
+### **Objective**
+To implement a decentralized comment system for videos shared on a Nostr-based platform, combining multiple NIPs to provide structured, interactive, and scalable functionality for video comments, reactions, live discussions, and metadata tagging.
+
+---
+
+### **Features**
+1. **Post Comments**:
+ - Users can post comments on videos.
+ - Comments scope to the video definition or root event with NIP-22 uppercase tags (`A`/`E`/`I`, `K`, `P`) while still emitting lowercase fallbacks for legacy clients.
+
+2. **Structured Threading**:
+ - Comments support threading by referencing parent comments with the lowercase NIP-22 set (`a`/`e`/`i`, `k`, `p`).
+ - Threaded replies are visually nested.
+
+3. **Reactions**:
+ - Users can react to comments (e.g., upvote, downvote) using NIP-25.
+
+4. **Live Discussions**:
+ - Real-time public chat using NIP-28 for live video events.
+
+5. **Optional Metadata**:
+ - Extra metadata fields are included for user preferences or administrative tags using NIP-24.
+
+6. **Real-Time Updates**:
+ - Comments, reactions, and live chats update in real-time using Nostr subscriptions.
+
+7. **Moderation**:
+ - Support for flagging or hiding inappropriate comments.
+
+8. **Privacy**:
+ - Encrypted comments for private videos (optional).
+
+---
+
+### **Technical Specifications**
+
+#### **1. Event Structure**
+Each component (comments, reactions, live chat) is represented as a Nostr event.
+
+##### **Comment Event**:
+bitvid publishes kind `1111` comments following [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md). Each event declares its root scope with uppercase tags and keeps the lowercase fallbacks so legacy clients continue to render threads.
+
+```json
+{
+ "kind": 1111,
+ "pubkey": "abcdef1234567890...",
+ "created_at": 1675000000,
+ "tags": [
+ ["A", "30078:video-author-pubkey:video-root-id", "wss://video.example"],
+ ["K", "30078"],
+ ["P", "video-author-pubkey", "wss://video.example"],
+ ["a", "30078:video-author-pubkey:video-root-id", "wss://video.example"],
+ ["e", "parent-comment-id", "parent-author-pubkey"],
+ ["k", "1111"],
+ ["p", "parent-author-pubkey"]
+ ],
+ "content": "This is a great video!"
+}
+```
+
+##### **Reaction Event**:
+```json
+{
+ "kind": 7,
+ "pubkey": "abcdef1234567890...",
+ "created_at": 1675000000,
+ "tags": [
+ ["e", "comment-event-id"], // Reference to the comment being reacted to
+ ["p", "reactor-pubkey"]
+ ],
+ "content": "+" // + for upvote, - for downvote
+}
+```
+
+##### **Live Chat Event**:
+```json
+{
+ "kind": 42,
+ "pubkey": "abcdef1234567890...",
+ "created_at": 1675000000,
+ "tags": [
+ ["e", "video-event-id"], // Reference to the live video
+ ["p", "participant-pubkey"]
+ ],
+ "content": "What a great discussion!"
+}
+```
+
+##### **Metadata (Optional)**:
+Metadata tags are added to comments or live chat events as needed:
+```json
+{
+ "kind": 1111,
+ "pubkey": "abcdef1234567890...",
+ "created_at": 1675000000,
+ "tags": [
+ ["e", "video-event-id"],
+ ["a", "30078:video-author-pubkey:video-root-id"],
+ ["m", "featured-comment"], // Example metadata tag
+ ["m", "admin-tag"] // Administrative tag
+ ],
+ "content": "Highlighted comment for this video."
+}
+```
+
+---
+
+### **Implementation Details**
+
+#### **1. Posting a Comment**
+To post a comment:
+1. The client constructs a kind `1111` comment event following NIP-22 threading semantics.
+2. The event includes uppercase root scope tags (`['A'\|`E`\|`I`, ], `['K', ]`, `['P', ]`) and carries lowercase fallbacks (`['a', ...]`, `['e', ...]`, `['k', ...]`, `['p', ...]`) for older relays and clients. Parent references append `['e', , ?, ]`, `['k', ]`, and `['p', ]` when available.
+3. The event is signed and published to relays.
+
+##### API Example:
+```javascript
+async function postComment(
+ { videoEventId, videoAuthorPubkey, videoRootId },
+ commentText,
+ parentCommentId = null
+) {
+ const event = {
+ kind: 1111,
+ pubkey: userPubkey,
+ created_at: Math.floor(Date.now() / 1000),
+ tags: [
+ ['A', `30078:${videoAuthorPubkey}:${videoRootId}`],
+ ['K', '30078'],
+ ['P', videoAuthorPubkey],
+ ['a', `30078:${videoAuthorPubkey}:${videoRootId}`],
+ ...(parentCommentId
+ ? [
+ ['e', parentCommentId, videoAuthorPubkey],
+ ['k', '1111'],
+ ['p', videoAuthorPubkey],
+ ]
+ : [['k', '30078'], ['p', videoAuthorPubkey]]),
+ ],
+ content: commentText
+ };
+
+ const signedEvent = await nostrClient.signEvent(event);
+ await nostrClient.pool.publish(nostrClient.relays, signedEvent);
+}
+```
+
+#### **2. Reacting to a Comment**
+Reactions use NIP-25.
+
+##### API Example:
+```javascript
+async function reactToComment(commentId, reaction) {
+ const event = {
+ kind: 7,
+ pubkey: userPubkey,
+ created_at: Math.floor(Date.now() / 1000),
+ tags: [['e', commentId]],
+ content: reaction // Use "+" for upvote, "-" for downvote
+ };
+
+ const signedEvent = await nostrClient.signEvent(event);
+ await nostrClient.pool.publish(nostrClient.relays, signedEvent);
+}
+```
+
+#### **3. Fetching Comments**
+Comments are retrieved using `REQ` messages filtered by the `e` tag for the video’s event ID and optionally by parent comment IDs for threading.
+
+##### API Example:
+```javascript
+async function fetchComments({ videoEventId, videoAuthorPubkey, videoRootId }) {
+ const filter = {
+ kinds: [1111],
+ '#e': [videoEventId],
+ '#a': [`30078:${videoAuthorPubkey}:${videoRootId}`],
+ limit: 100
+ };
+
+ const comments = await nostrClient.pool.list(nostrClient.relays, [filter]);
+ return comments.sort((a, b) => a.created_at - b.created_at);
+}
+```
+
+#### **4. Live Chat for Live Videos**
+Real-time public chats for live videos use NIP-28.
+
+##### API Example:
+```javascript
+function subscribeToLiveChat(videoId) {
+ const sub = nostrClient.pool.sub(nostrClient.relays, [
+ {
+ kinds: [42],
+ '#e': [videoId]
+ }
+ ]);
+
+ sub.on('event', event => {
+ console.log('New chat message:', event);
+ });
+}
+```
+
+#### **5. Metadata Integration**
+Use NIP-24 to attach metadata to events for administrative or user-specific tags.
+
+---
+
+### **Data Flow**
+1. **Posting a Comment**:
+ - User creates a comment event.
+ - Client signs and publishes the event to relays.
+2. **Fetching Comments**:
+ - Client requests comments for a video by filtering events with the combined `#e` and `#a` tags so both the specific video event and its root definition are represented.
+3. **Reacting to Comments**:
+ - Users react to comments by posting reaction events.
+4. **Live Discussions**:
+ - Live chat messages are sent and received in real-time using NIP-28.
+5. **Metadata Management**:
+ - Metadata is attached during event creation or editing.
+
+> **Tagging Requirement:** Clients must keep the combined `#e`/`#a` tagging pattern shown above. `discussionCountService.buildDiscussionCountFilters` depends on those tags when querying relays so UI components can surface accurate comment totals.
+
+---
+
+### **UI/UX Considerations**
+
+1. **Comment Form**:
+ - Input field for comments.
+ - Button to post comments.
+ - Optional reply button for threaded comments.
+
+2. **Reactions**:
+ - Upvote and downvote icons next to each comment.
+ - Display reaction counts dynamically.
+
+3. **Live Chat**:
+ - Real-time message updates below live videos.
+ - Highlight important messages using metadata tags.
+
+4. **Nested Threading**:
+ - Indent replies to show comment hierarchy.
+
+5. **Comment Gate**:
+ - UI components such as `VideoCard.buildDiscussionCount` already hide comment affordances when `enableComments` is false. Future enhancements must honor the same feature flag so comment entry points remain consistent with existing gating.
+
+---
+
+### **Testing and Validation**
+
+1. Validate:
+ - Posting, retrieving, and displaying threaded comments.
+ - Reactions and live chat events.
+ - Metadata tagging.
+2. Test:
+ - Pagination for large comment threads.
+ - Performance under high comment or chat volume.
+3. Simulate:
+ - Various timestamp scenarios to ensure NIP-22 compliance.
+
+---
+
+### **Benefits**
+- Decentralized and censorship-resistant.
+- Fully interoperable with other Nostr clients and relays.
+- Extensible with reactions, live discussions, and metadata features.
diff --git a/dist/content/roadmap/07_bitvid_Enhanced_View_Rating_&_Retention_Penalty_Scoring.md b/dist/content/roadmap/07_bitvid_Enhanced_View_Rating_&_Retention_Penalty_Scoring.md
new file mode 100644
index 00000000..773d37dd
--- /dev/null
+++ b/dist/content/roadmap/07_bitvid_Enhanced_View_Rating_&_Retention_Penalty_Scoring.md
@@ -0,0 +1,394 @@
+# **bitvid: Updated Plan with VRR (View, Rating, and Retention) Penalty Scoring**
+
+## **Project Overview**
+
+**Objective**
+Enable a decentralized video platform where every view and engagement action is logged via the Nostr protocol (NIP-78). This system incorporates both interval-based watch tracking and a penalty scoring method for short watch times (potentially due to slow loading or immediate disinterest).
+
+**Key Features**
+1. Track video views and user retention at regular intervals.
+2. Assign penalty scores if a viewer leaves within certain short-watch thresholds.
+3. Use this data to power more accurate recommendations.
+4. Maintain user privacy by supporting logged-in (persistent pubkey) and session-based (temporary pubkey) tracking.
+
+---
+
+## **Technical Requirements**
+
+1. **Video View Tracking**
+ - **Event Trigger**
+ - A “view” event is sent to a relay whenever a user starts playing a video.
+ - Subsequent engagement events (interval updates, exit events) follow.
+ - **Data Logged**
+ - Video ID or magnet URI.
+ - Viewer’s pubkey (for logged-in) or session-based key (for guests).
+ - Timestamps and session details.
+ - **Nostr Protocol Usage**
+ - Build on NIP-78, using `kind: 30078` events.
+
+2. **Non-Logged-In User Tracking**
+ - Generate an ephemeral key pair on session start.
+ - Mark the event with something like `["session", "true"]` to distinguish it from a persistent account.
+ - Discard the key pair when the session ends.
+
+3. **Recommendations**
+ - **Algorithm**
+ - Combine tags, watch intervals, exit penalty scores, and metadata for ranking.
+ - **Presentation**
+ - Show recommended content in a sidebar or beneath the video player.
+ - **Filters**
+ - Exclude deleted or private content unless the user owns it.
+
+4. **User Privacy**
+ - Provide an opt-in or opt-out setting for tracking.
+ - Collect minimal data to preserve user autonomy.
+ - Consider encryption or obfuscation for private data.
+
+5. **Performance Considerations**
+ - Batching events to avoid overwhelming relays (e.g., every 5 seconds or in small groups).
+ - Index or cache data to speed up recommendations.
+
+---
+
+## **Functional Components**
+
+1. **Event Structure**
+
+ **Regular View Event (Start)**
+ ```json
+ {
+ "kind": 30078,
+ "pubkey": "user_pubkey_or_temp_key",
+ "created_at": 1672531200,
+ "tags": [
+ ["t", "view"],
+ ["video", "video_id"]
+ ],
+ "content": "{\"videoId\":\"video_id\",\"timestamp\":1672531200}"
+ }
+ ```
+
+ **Interval/Retention Event (5-second, 10-second, etc.)**
+ ```json
+ {
+ "kind": 30078,
+ "pubkey": "user_pubkey_or_temp_key",
+ "created_at": 1672531234,
+ "tags": [
+ ["t", "video-watch"],
+ ["video", "video_id"]
+ ],
+ "content": "{\"timestamp\":1672531234,\"currentWatchSeconds\":10}"
+ }
+ ```
+
+ **Exit Event (With Penalty Score)**
+ ```json
+ {
+ "kind": 30078,
+ "pubkey": "user_pubkey_or_temp_key",
+ "created_at": 1672531300,
+ "tags": [
+ ["t", "vrr-exit"],
+ ["video", "video_id"]
+ ],
+ "content": "{\"watchTime\":4,\"score\":25}"
+ }
+ ```
+
+2. **UI Updates**
+ - **Video Player**
+ - Trigger events when the video starts, at regular intervals, and upon exit.
+ - **Recommendations**
+ - Fetch and rank videos based on a combination of watch intervals, exit scores, and content tags.
+
+3. **Integration Points**
+ - **Frontend**
+ - Implement functions like `trackViewEvent()` and `applyPenaltyScore()` in a dedicated module.
+ - **Backend/Relay**
+ - Store, relay, and retrieve events for analytics and recommendation algorithms.
+
+4. **Development Workflow**
+ - **videoTracker.js**
+ - Contains the VRR methods: initial view events, interval tracking, penalty scoring on exit.
+ - **app.js**
+ - Orchestrates user interactions, calls into `videoTracker.js` on playback, stopping, etc.
+ - **HTML/CSS**
+ - Builds out a recommendations display area or scoreboard for each video.
+
+---
+
+## **VRR (View, Rating, and Retention) Method**
+
+### **Penalty (or Bonus) Scoring for Early Exits**
+
+| Watch Time "]` to map the event to a specific video.
+ - `["session", "true"]` if the viewer is non-logged-in using a temporary session.
+- **Content**: May include a JSON object with the video ID, timestamp, and optional metadata.
+
+**Example View Event (Logged In):**
+```json
+{
+ "kind": 30078,
+ "pubkey": "user_pubkey",
+ "created_at": 1672531200,
+ "tags": [
+ ["t", "view"],
+ ["video", "video_abc123"]
+ ],
+ "content": "{\"videoId\":\"video_abc123\",\"timestamp\":1672531200}"
+}
+```
+
+**Example View Event (Temporary Session):**
+```json
+{
+ "kind": 30078,
+ "pubkey": "temporary_pubkey",
+ "created_at": 1672531200,
+ "tags": [
+ ["t", "view"],
+ ["video", "video_abc123"],
+ ["session", "true"]
+ ],
+ "content": "{\"videoId\":\"video_abc123\",\"timestamp\":1672531200}"
+}
+```
+
+---
+
+## 4. Ranking Logic
+
+1. **Popular Videos**
+ - Sort by the total number of view events.
+ - A simple approach is to query all view events for each video, then rank them by the count of events.
+
+2. **Trending Videos**
+ - Evaluate growth in view events over a recent window (for example, the last 24 hours).
+ - Compare the count of new views against a previous period, or calculate the rate of increase.
+
+3. **For You**
+ - Look at what the user watched or subscribed to (via kind `30000` subscription follow sets).
+ - Track the user’s or session’s recent view tags, then recommend videos with overlapping tags or from the same channels.
+
+---
+
+## 5. Home Page Layout and Rendering
+
+### 5.1 HTML Structure
+
+Your `index.html` might include placeholders for each section:
+
+```html
+
+```
+
+### 5.2 JavaScript Flow
+
+1. **Fetch Data**
+ - Pull video metadata from kind `30078` events that contain video info or from your existing approach.
+ - Pull subscription data (kind `30000`).
+ - Pull view events (kind `30078` with `"t", "view"`).
+
+2. **Process Rankings**
+ - Tally views per video.
+ - Track growth rates for trending.
+ - Filter or sort data.
+
+3. **Render Sections**
+ - Populate each section with relevant videos.
+ - A typical approach:
+
+ ```js
+ async function loadHomePage() {
+ const videos = await fetchAllVideos(); // from Nostr or local data
+ const viewEvents = await fetchAllViews(); // filter by "t=view"
+
+ const forYouData = getForYouRecommendations(videos, viewEvents);
+ renderVideoGrid(forYouData, "forYouGrid");
+
+ const trendingData = getTrendingVideos(videos, viewEvents);
+ renderVideoGrid(trendingData, "trendingGrid");
+
+ const popularData = getPopularVideos(videos, viewEvents);
+ renderVideoGrid(popularData, "popularGrid");
+ }
+ ```
+
+ - Each function (`getForYouRecommendations`, `getTrendingVideos`, `getPopularVideos`) calculates the appropriate subset of videos.
+
+---
+
+## 6. Single-Page View Structure
+
+### 6.1 Profile and Other Views
+
+- Keep the header, footer, and any sidebar in place.
+- Change the visible view container to switch between the home grid, a user’s profile, or other screens.
+- Use JavaScript routing (hash-based or history API) to detect and render the correct view in `index.html`.
+
+**Example:**
+```js
+function handleRouteChange() {
+ const hash = window.location.hash;
+
+ if (hash.startsWith("#profile")) {
+ const npub = hash.split("/")[1];
+ loadProfileView(npub);
+ } else {
+ // Default: show home
+ loadHomePage();
+ }
+}
+
+window.addEventListener("hashchange", handleRouteChange);
+window.addEventListener("load", handleRouteChange);
+```
+
+---
+
+## 7. Recommendations and Personalized Feeds
+
+### 7.1 Logged-In Users
+
+- Use their public key to track watch history and subscription data.
+- Query view events authored by that pubkey.
+- Match frequent tags, channels, or categories.
+
+### 7.2 Non-Logged-In Users
+
+- Generate a session-based key pair.
+- Tag view events with `["session", "true"]`.
+- Maintain in-memory or localStorage.
+- Provide basic recommendations for the session.
+
+---
+
+## 8. Implementation Steps
+
+1. **View Logging**:
+ - Update the video player code to publish a view event when a user starts or confirms playback.
+
+2. **Data Fetching**:
+ - Build or adapt functions to query view events from your Nostr relays.
+ - Merge the resulting data with your video metadata.
+
+3. **Ranking Functions**:
+ - Create functions to rank videos by total views (popular) or view velocity (trending).
+ - Create a function that looks at subscription data and view history for personalized feeds.
+
+4. **Rendering**:
+ - Implement `renderVideoGrid(data, containerId)` to fill the given section with video cards.
+ - Keep the layout responsive and consistent.
+
+5. **Routes and Views**:
+ - Integrate the home feed with other views (e.g., user profiles, single video modals) within the same page.
+ - Use a simple router or your existing JavaScript structure to swap out sections.
+
+---
+
+## 9. Future Enhancements
+
+1. **Advanced Recommendations**
+ - Add more factors like video tags, watch duration, or user engagement events (likes, zaps).
+
+2. **Analytics Dashboard**
+ - Provide creators with a summary of total views, trending periods, and audience insights.
+
+3. **Community Features**
+ - Collaborative playlists, comments, or shared watch parties, all tracked in a decentralized manner.
+
+4. **Optimized Relay Usage**
+ - Implement batching or caching to limit the load on relays when publishing or querying events.
+
+---
+
+### Conclusion
+
+This updated plan replaces the old peer-count method with view event tracking. It outlines how to fetch and render dynamic sections on the home page, switch between views, and generate personalized recommendations. By tracking views via Nostr events and rendering multiple content sections in a single-page architecture, bitvid can maintain a flexible interface while providing a richer user experience.
\ No newline at end of file
diff --git a/dist/content/roadmap/09_bitvid_Enhanced_NIP-35_+_WebRTC_Check_Integration.md b/dist/content/roadmap/09_bitvid_Enhanced_NIP-35_+_WebRTC_Check_Integration.md
new file mode 100644
index 00000000..1fc4f0a1
--- /dev/null
+++ b/dist/content/roadmap/09_bitvid_Enhanced_NIP-35_+_WebRTC_Check_Integration.md
@@ -0,0 +1,205 @@
+# **bitvid: Enhanced NIP-35 + WebRTC Check Integration**
+
+### Summary
+This NIP introduces **`kind=2003`** events as a standardized way to index BitTorrent metadata on Nostr. Such events typically include enough information for Nostr-based clients or indexers to display, categorize, and construct magnet links. They do **not** contain `.torrent` files themselves, only the metadata.
+
+---
+
+## 1. Torrent Events
+
+**`kind=2003`** events are interpreted as “Torrent” posts. Clients can index, display, and search them. The essential tags are:
+
+1. **`x`** (required)
+ - The BitTorrent V1 info hash (hex-encoded).
+ - Matches the `xt=urn:btih:HASH` parameter in magnet links.
+
+2. **`file`** (optional, multiple)
+ - Each `["file", "", ""]` entry describes a file within the torrent.
+
+3. **`tracker`** (recommended, multiple)
+ - Each `["tracker", ""]` entry specifies a tracker (UDP/HTTP/HTTPS/WSS).
+ - If you want to support **WebTorrent/WebRTC** streaming, include at least one `wss://` tracker such as `wss://tracker.webtorrent.io`.
+
+4. **`title`** (optional)
+ - A short user-facing title or release name.
+
+5. **`t`** (optional, multiple)
+ - Simple categories or tags, e.g., `movie`, `tv`, `4k`, `3d`, `adult`.
+
+### Example
+```jsonc
+{
+ "kind": 2003,
+ "content": "Extended cut with behind-the-scenes footage.",
+ "tags": [
+ ["title", "The Outer Space (Extended Cut) 2025 UHD"],
+ ["x", "abc123def4567890abc123def4567890abc123de"],
+ ["file", "outer_space_2025_UHD.mkv", "78000000000"],
+ ["file", "extra_features", "2000000000"],
+ ["tracker", "udp://tracker.openbittorrent.com:6969/announce"],
+ ["tracker", "wss://tracker.webtorrent.io"], // WebRTC-compatible
+ ["t", "movie"],
+ ["t", "uhd"]
+ ]
+}
+```
+
+---
+
+## 2. Tag Prefixes for Extra Metadata
+
+Beyond the basic torrent info, **NIP-35** supports optional tag prefixes to map the event to external data sources or richer category structures:
+
+- **`tcat:`** A comma-separated category path (e.g., `["i", "tcat:video,movie,4k"]`).
+- **`newznab:`** [newznab](https://github.com/Prowlarr/Prowlarr/blob/develop/src/NzbDrone.Core/Indexers/NewznabStandardCategory.cs) category IDs.
+- **`tmdb:`, `ttvdb:`, `imdb:`, `mal:`, `anilist:`** References to well-known movie, TV, or anime databases.
+ - May include specific media types, like `tmdb:movie:693134` or `mal:anime:9253`.
+
+These references are optional but help indexers or other clients correlate torrent data with known database records.
+
+### Example with prefixes
+```jsonc
+{
+ "kind": 2003,
+ "content": "Full UHD release with commentary track.",
+ "tags": [
+ ["title", "Dune Part Two 2160p HDR"],
+ ["x", "abcdef0123456789..."],
+ ["file", "Dune.Part.Two.2024.UHD.mkv", "50000000000"],
+ ["tracker", "udp://tracker.openbittorrent.com:6969"],
+ ["tracker", "wss://tracker.webtorrent.io"],
+ ["i", "tcat:video,movie,4k"],
+ ["i", "tmdb:movie:693134"],
+ ["i", "ttvdb:movie:290272"],
+ ["t", "movie"],
+ ["t", "4k"]
+ ]
+}
+```
+
+---
+
+## 3. Constructing Magnet Links
+
+A **kind=2003** torrent event provides data to build a magnet link, typically:
+
+```
+magnet:?xt=urn:btih:&tr=&tr=...
+```
+
+- **`x`** tag → ``
+- **`tracker`** tags → `&tr=`
+
+If a torrent is intended for **WebTorrent** streaming, it **must** have a `wss://` tracker in its `tracker` tags.
+
+### Example Magnet
+```
+magnet:?xt=urn:btih:abc123def...&tr=wss%3A%2F%2Ftracker.webtorrent.io&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969
+```
+
+---
+
+## 4. WebTorrent/WebRTC Considerations
+
+1. **Include at least one `wss://` tracker** in your `tracker` tags. Example:
+ ```jsonc
+ ["tracker", "wss://tracker.webtorrent.io"]
+ ```
+2. **Active WebRTC seeder**: Even with a `wss://` tracker, the torrent must be seeded in real time by at least one WebTorrent/WebRTC peer. Without a WebRTC seed, browser-based clients (like bitvid or other WebTorrent-powered apps) cannot download or stream.
+
+3. **No `.torrent` file on Nostr**: This NIP is purely metadata (info hash, tracker URLs). Traditional BitTorrent clients can still use the magnet link if it has UDP/HTTP trackers.
+
+---
+
+## 5. Searching & Indexing
+
+Implementers can:
+
+- **Index** `kind=2003` events from multiple relays.
+- Provide an interface to **search** by:
+ - Title (`["title", ...]`)
+ - Info hash (`["x", ...]`)
+ - File names (`["file", ...]`)
+ - Categories (`["t", ...]`, `["i", "tcat:..."]`, etc.)
+ - External references (`["i", "tmdb:movie:..."]`, `["i", "imdb:..."]`)
+- **Filter** adult content by a specific tag or category if desired.
+
+---
+
+## 6. Torrent Comments (kind=2004)
+
+A **kind=2004** event is used to reply to a torrent event. It functions much like a regular text note (kind=1), but:
+- References the torrent event via NIP-10 reply tags.
+- Often used to discuss quality, seeding, or additional info about the torrent.
+
+---
+
+## 7. Blocklists & Adult Filtering
+
+While the protocol is open, clients or aggregators may apply local policies:
+- **Blocklists** to ignore certain pubkeys or known spam.
+- **Adult filtering** to hide or show certain categories or tags (like `["t", "adult"]` or `["i", "tcat:video,adult"]`).
+
+This is **not** enforced at the protocol level but is left to each implementer’s discretion.
+
+---
+
+## 8. Implementation Notes
+
+1. **No `.torrent` Files**
+ `.torrent` files are not stored on Nostr—just the info hash and any relevant tracker URLs.
+
+2. **Announce Sets**
+ Clients should collect **all** `["tracker", ...]` tags to build a comprehensive announce set in the magnet link. This ensures maximum connectivity for both UDP/HTTP and WebRTC trackers.
+
+3. **Fallback**
+ If a torrent lacks `wss://` trackers, WebTorrent clients can’t stream it unless an external service or user rehosts it with a WebRTC seed/tracker combination.
+
+4. **Metadata Matching**
+ If `["i", "tmdb:movie:693134"]` or similar tags are present, clients may fetch additional metadata (like cover art) from that external database. This is optional and outside the core scope of NIP-35 but encouraged for better user experience.
+
+5. **Periodic Refresh**
+ Since torrents are seeded in real time, a WebTorrent client (e.g., in a browser) may show a torrent as “active” only if at least one WebRTC seed is online. Clients/aggregators might periodically check the presence of active WebRTC peers to update their UI.
+
+---
+
+## 9. Example JSON
+
+Below is a more complete JSON example following NIP-35 conventions, demonstrating various optional fields:
+
+```jsonc
+{
+ "kind": 2003,
+ "content": "Full UHD release. Contains behind-the-scenes extras, commentary track, and sample clips.",
+ "tags": [
+ ["title", "Dune Part Two 2160p HDR"],
+ ["x", "abcdef0123456789abcdef0123456789abcdef01"],
+ ["file", "Dune.Part.Two.2024.UHD.mkv", "50000000000"],
+ ["file", "Behind.The.Scenes.mp4", "2000000000"],
+ ["tracker", "udp://tracker.openbittorrent.com:6969"],
+ ["tracker", "wss://tracker.webtorrent.io"],
+ ["tracker", "udp://tracker.coppersurfer.tk:6969"],
+ ["i", "tcat:video,movie,uhd"],
+ ["i", "tmdb:movie:693134"],
+ ["i", "imdb:tt15239678"],
+ ["t", "movie"],
+ ["t", "uhd"]
+ ]
+}
+```
+
+---
+
+## 10. References & Links
+
+- **[BitTorrent Magnet Link Specification (BEP-0053)](https://www.bittorrent.org/beps/bep_0053.html)**
+- **[WebTorrent Documentation](https://webtorrent.io/)**
+- **[NIP-10: Replies and Mentions](https://github.com/nostr-protocol/nips/blob/master/10.md)**
+- **[dtan.xyz Repository](https://git.v0l.io/Kieran/dtan)**
+- **[nostrudel.ninja Implementation](https://github.com/hzrd149/nostrudel/tree/next/src/views/torrents)**
+
+---
+
+### End of Updated Spec Sheet
+
+This revision aims to integrate WebTorrent/WebRTC considerations seamlessly into the existing NIP-35 structure. It remains optional to provide `wss://` trackers, but doing so is strongly recommended if you want real-time streaming in browser-based clients like bitvid or other WebTorrent-powered frontends.
\ No newline at end of file
diff --git a/dist/css/docs.css b/dist/css/docs.css
new file mode 100644
index 00000000..95c7f003
--- /dev/null
+++ b/dist/css/docs.css
@@ -0,0 +1,76 @@
+/* Docs layout + table of contents styling */
+#docsToc {
+ position: sticky;
+ top: var(--space-xl);
+ align-self: flex-start;
+ max-height: calc(100vh - var(--space-2xl));
+ overflow-y: auto;
+ padding: var(--space-md);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ border-radius: var(--radius-lg);
+ background-color: var(--surface-sunken);
+ box-shadow: inset 0 0 0 var(--border-width-hairline)
+ var(--surface-overlay-darker);
+}
+
+#docsContent {
+ min-width: 0;
+}
+
+#docsContent .markdown-prose {
+ max-width: 72ch;
+}
+
+#docsTocList,
+#docsTocDrawerNav {
+ gap: var(--space-xs);
+}
+
+#docsTocList ul,
+#docsTocDrawerNav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#docsTocList li,
+#docsTocDrawerNav li {
+ margin: 0;
+}
+
+#docsTocList [data-docs-toc-item],
+#docsTocDrawerNav [data-docs-toc-item] {
+ display: block;
+ padding: var(--space-2xs) var(--space-xs);
+ border-radius: var(--radius-md);
+ color: var(--text-muted);
+ text-decoration: none;
+ transition: background-color var(--motion-duration-fast) ease,
+ color var(--motion-duration-fast) ease;
+}
+
+#docsTocList [data-docs-toc-item]:hover,
+#docsTocDrawerNav [data-docs-toc-item]:hover,
+#docsTocList [data-docs-toc-item]:focus-visible,
+#docsTocDrawerNav [data-docs-toc-item]:focus-visible {
+ background-color: var(--surface-muted);
+ color: var(--text-primary);
+}
+
+#docsTocList [data-docs-toc-item][aria-current="page"],
+#docsTocDrawerNav [data-docs-toc-item][aria-current="page"] {
+ background-color: var(--surface-overlay-panel-soft);
+ color: var(--text-primary);
+}
+
+#docsTocList [data-docs-toc-item]:focus-visible,
+#docsTocDrawerNav [data-docs-toc-item]:focus-visible {
+ outline: var(--space-3xs) solid var(--color-accent);
+ outline-offset: var(--space-3xs);
+}
+
+#docsTocDrawerNav {
+ max-height: calc(100vh - var(--space-2xl));
+ overflow-y: auto;
+ padding-right: var(--space-2xs);
+}
diff --git a/dist/css/tailwind.generated.css b/dist/css/tailwind.generated.css
new file mode 100644
index 00000000..d4723d4d
--- /dev/null
+++ b/dist/css/tailwind.generated.css
@@ -0,0 +1,20 @@
+:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner-base:var(--color-page);--surface-overlay-banner:var(--surface-overlay-banner-base);--surface-overlay-banner-opaque:var(--surface-overlay-banner-base);--surface-overlay-banner-strong:color-mix(in srgb,var(--surface-overlay-banner-base) 82%,transparent);--surface-overlay-banner-bottom:color-mix(in srgb,var(--surface-overlay-banner-base) 50%,transparent);--surface-overlay-banner-channel-mid:color-mix(in srgb,var(--surface-overlay-banner-base) 24%,transparent);--surface-overlay-banner-channel-faint:color-mix(in srgb,var(--surface-overlay-banner-base) 10%,transparent);--surface-overlay-banner-soft:color-mix(in srgb,var(--surface-overlay-banner-base) 56%,transparent);--surface-overlay-banner-faint:color-mix(in srgb,var(--surface-overlay-banner-base) 18%,transparent);--surface-overlay-banner-transparent:transparent;--surface-overlay-banner-gradient-header:linear-gradient(to bottom,var(--surface-overlay-banner-opaque) 0%,var(--surface-overlay-banner-strong) 38%,var(--surface-overlay-banner-soft) 70%,var(--surface-overlay-banner-faint) 88%,var(--surface-overlay-banner-transparent) 100%);--surface-overlay-banner-gradient-channel:linear-gradient(to top,var(--surface-overlay-banner-bottom) 0%,var(--surface-overlay-banner-channel-mid) 28%,var(--surface-overlay-banner-channel-faint) 42%,var(--surface-overlay-banner-transparent) 50%);--surface-overlay-banner-gradient:var(
+ --surface-overlay-banner-gradient-header
+ );--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--app-header-centerline-offset:calc(var(--space-sm) + var(--space-2xl-plus)/2);--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--message-bubble-background:var(--surface-sunken);--message-bubble-border:var(--border-subtle);--message-bubble-text:var(--text-primary);--message-bubble-meta:var(--text-muted);--message-bubble-outgoing-background:var(--surface-overlay-panel);--message-bubble-outgoing-border:var(--border-overlay);--unread-badge-background:var(--status-info-strong);--unread-badge-text:var(--text-inverse);--reply-highlight-background:var(--status-info-surface);--reply-highlight-border:var(--status-info-border);--reply-highlight-text:var(--status-info-on);--reply-highlight-icon:var(--status-info-on);--notification-banner-accent:var(--color-accent-strong);--notification-banner-accent-strong:var(--color-accent);--notification-banner-border:var(--surface-overlay-panel-tint);--notification-banner-background:var(--surface-overlay-panel);--notification-banner-text:var(--text-primary);--notification-banner-icon:var(--text-primary);--notification-banner-critical-accent:var(--status-danger-strong);--notification-banner-critical-accent-strong:var(--status-danger);--notification-banner-critical-border:var(--color-ring-critical-soft);--notification-banner-critical-background:var(--surface-raised-critical);--notification-banner-critical-text:var(--status-danger-on);--notification-banner-success-accent:var(--status-success-strong);--notification-banner-success-accent-strong:var(--status-success);--notification-banner-success-border:var(--status-success-border);--notification-banner-success-background:var(--status-success-surface);--notification-banner-success-text:var(--status-success-on);--notification-banner-info-accent:var(--status-info-strong);--notification-banner-info-accent-strong:var(--status-info);--notification-banner-info-border:var(--status-info-border);--notification-banner-info-background:var(--status-info-surface);--notification-banner-info-text:var(--status-info-on);--notification-banner-warning-accent:var(--status-warning-strong);--notification-banner-warning-accent-strong:var(--status-warning);--notification-banner-warning-border:var(--status-warning-border);--notification-banner-warning-background:var(--status-warning-surface);--notification-banner-warning-text:var(--status-warning-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-app-header:40;--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-popover:140;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--z-modal-top-root:140;--z-modal-top-overlay:150;--z-modal-top-content:160;--z-modal-peak-root:165;--z-modal-peak-overlay:175;--z-modal-peak-content:185;--z-modal-always-top:200;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded-base:16rem;--sidebar-dropup-content-width:0px;--sidebar-width-expanded:max(var(--sidebar-width-expanded-base),var(--sidebar-dropup-content-width));--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-sm);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-dropup-scroll-reserve:calc(var(--scrollbar-thin-width) + var(--space-sm) + var(--space-2xs));--sidebar-dropup-max-height:18rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-nav-padding-inline-start:var(--space-xs);--space-sidebar-nav-padding-inline-end:calc(var(--space-lg) + var(--space-2xs));--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--breakpoint-lg:64rem;--popover-backdrop-blur:12px;--overlay-panel-radius:var(--radius-lg);--overlay-panel-shadow:var(--shadow-lg);--overlay-panel-padding-inline:var(--popup-padding-inline);--overlay-panel-padding-block:var(--popup-padding-block);--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-modal-primary-fr:1.85fr;--video-modal-secondary-min:320px;--video-modal-secondary-max:35rem;--video-modal-secondary-fr:1fr;--video-modal-layout-max:calc(var(--layout-player-max-width) + var(--video-modal-secondary-max) + var(--space-2xl-plus));--revert-modal-sidebar-min:240px;--revert-modal-sidebar-width:280px;--popover-inline-safe-max:calc(100vw - var(--space-xl));--progress-height-sm:0.25rem;--progress-height-md:0.5rem;--progress-radius:var(--radius-full);--progress-track-color:var(--color-border-subtle);--progress-fill-color:var(--color-info);--progress-transition-duration:var(--motion-duration-fast);--progress-transition-ease:var(--motion-ease-out);--space-4xs:0.0625rem;--space-3xs:0.125rem;--space-2xs:0.25rem;--space-xs:0.5rem;--space-xs-snug:0.4rem;--space-sm:0.75rem;--space-md:1rem;--space-md-plus:1.25rem;--space-lg:1.5rem;--space-xl:2rem;--space-xl-compact:2.25rem;--space-xl-plus:2.5rem;--space-2xl:3rem;--space-2xl-plus:3.5rem;--size-2px:2px;--size-3px:3px;--size-12px:12px;--size-24px:24px;--size-30px:30px;--size-32px:32px;--size-64px:64px;--size-80px:80px;--size-96px:96px;--size-128px:128px;--size-140px:140px;--size-168px:168px;--size-256px:256px;--size-5-75rem:5.75rem;--size-6rem:6rem;--size-7rem:7rem;--size-8rem:8rem;--size-12rem:12rem;--size-12-5rem:12.5rem;--size-14rem:14rem;--size-16rem:16rem;--size-18rem:18rem;--size-20rem:20rem;--size-28rem:28rem;--size-34rem:34rem;--size-40rem:40rem;--size-45rem:45rem;--size-70rem:70rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--radius-modal-xl:1.75rem;--radius-sidebar-shell:1.5rem;--radius-sidebar-panel:1.1rem;--radius-sidebar-nav:0.95rem;--radius-toggle-thumb:0.5625rem;--menu-min-width:12rem;--header-search-max-inline:var(--size-34rem);--modal-max-width:62.5rem;--modal-sheet-inline-max:var(--modal-max-width);--modal-shell-max-height:90vh;--modal-sheet-max-height:92vh;--modal-body-max-height:calc(92vh - 4rem);--profile-modal-inline-max:var(--size-70rem);--player-modal-module-scroll-min-height:var(--size-14rem);--player-modal-module-scroll-max-height:var(--size-28rem);--modal-pane-max-height:48vh;--modal-pane-min-height:20rem;--moderation-badge-max-inline:var(--size-28rem);--notification-banner-max-inline:var(--size-28rem);--profile-modal-nav-min-width:max-content;--profile-modal-nav-max-width:max-content;--profile-modal-scrollbar-offset:var(--space-2xs);--modal-embed-height:80vh;--profile-history-max-height:26.25rem;--comment-avatar-size:var(--space-xl-plus);--comment-composer-min-height:var(--size-7rem);--video-modal-reaction-label-min-inline:var(--size-6rem);--video-modal-item-media-min:var(--size-5-75rem);--video-modal-item-media-max:var(--size-8rem);--video-card-compact-media-min:var(--size-8rem);--video-card-compact-media-max:var(--size-12-5rem);--similar-card-media-width:var(--size-168px);--similar-card-media-width-sm:var(--size-140px);--docs-popover-scroll-height:var(--size-45rem);--profile-modal-active-min-width:var(--size-12rem);--status-log-min-height:5rem;--layout-player-max-width:68.75rem;--layout-docs-max-width:92.5rem;--icon-size-sm:var(--font-size-lg);--icon-size-md:var(--space-md-plus);--icon-size-lg:var(--space-xl-plus);--avatar-size-lg:var(--space-2xl-plus);--form-textarea-min-height:8rem;--scrollbar-thin-width:0.4rem;--modal-progress-height:calc(var(--space-3xs)*3);--video-modal-action-min-width:2.75rem;--outline-thick-width:0.1875rem;--icon-button-ring-width:var(--outline-thick-width);--form-select-icon-offset:var(--space-sm);--form-select-icon-gap:var(--space-xs-snug);--form-select-icon-hit-area:var(--space-xl-plus);--form-select-icon-size:0.6rem;--form-select-divider-width:var(--border-width-hairline);--form-checkbox-checkmark-offset:calc(var(--space-3xs)*-1);--breakpoint-edge-offset:0.02px;--offscreen-offset:-9999px;--motion-card-enter-translate:var(--space-xs);--motion-fade-in-translate:var(--space-md-plus);--motion-login-option-hover-translate:calc(var(--size-3px)*-1);--motion-video-card-hover-translate:-0.35rem;--motion-video-card-backdrop-translate:0.15rem;--shadow-sm:0 0.0625rem 0.125rem 0 var(--color-shadow-floating);--shadow-md:0 0.25rem 0.375rem -0.0625rem var(--color-shadow-floating);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem var(--color-shadow-elevated);--shadow-badge-offset-y:var(--size-12px);--shadow-badge-blur:var(--size-30px);--shadow-notification-offset-y:var(--size-32px);--shadow-notification-blur:var(--size-64px);--shadow-modal:0 2.75rem 6rem -1.25rem var(--color-shadow-modal);--shadow-sidebar-shell:0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);--shadow-sidebar-accent:0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);--shadow-sidebar-trigger:0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);--shadow-sidebar-dropup:0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);--shadow-sidebar-panel:0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);--shadow-sidebar-focus-ring:0 0 0 0.125rem var(--color-sidebar-glow),0 0 0 0.25rem var(--color-sidebar-hover-strong);--shadow-popover-zap:0 22px 48px -18px var(--color-shadow-intense);--shadow-video-modal:0 1rem 2.25rem var(--color-shadow-elevated);--blur-video-card-backdrop-strong:var(--size-24px);--video-modal-ambient-blur-min:var(--size-128px);--video-modal-ambient-blur-max:var(--size-256px);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-4xs:0.65rem;--font-size-3xs:0.6875rem;--font-size-2xs:0.7rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-xl-plus:1.875rem;--font-size-modal-title-base:1.25rem;--font-size-sidebar-nav:0.95rem;--font-size-sidebar-subnav:0.85rem;--font-size-sidebar-trigger:0.9rem;--link-underline-thickness:var(--size-2px);--line-height-tight:1.1;--line-height-snug:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--tracking-extra-wide:0.2em;--grid-border-width:calc(var(--space-2xs)/4);--grid-canvas-padding-top:var(--grid-border-width);--grid-viewport-min-height:calc(var(--space-xl) - var(--space-sm));--grid-cell-padding-block:var(--space-sm);--grid-cell-padding-inline:var(--space-md);--grid-header-font-size:var(--font-size-xs);--grid-header-letter-spacing:0.08em;--grid-overlay-margin:10%;--grid-overlay-padding-block:var(--space-md);--grid-overlay-padding-inline:var(--space-xl);--grid-overlay-radius:var(--radius-lg);--grid-overlay-font-size:var(--font-size-lg);--grid-overlay-text-opacity:0.66;--grid-resizer-width:calc(var(--space-2xs)*1.25);--grid-resize-overlay-width:var(--grid-border-width);--grid-sort-indicator-size:calc(var(--space-lg) - var(--space-2xs));--grid-sort-indicator-offset:var(--space-xs);--grid-sort-indicator-stroke:calc(var(--space-2xs)/2);--grid-sort-indicator-thickness:var(--grid-border-width);--notify-padding-block:var(--space-md);--notify-padding-inline:var(--space-2xl);--notify-font-size:var(--font-size-base);--notify-dismiss-size:calc(var(--space-xl) + var(--space-xs));--notify-dismiss-size-compact:calc(var(--space-lg) + var(--space-2xs));--notify-dismiss-font-size:var(--font-size-sm);--notify-dismiss-radius:var(--radius-full);--notify-dismiss-color:var(--color-subtle);--notify-dismiss-background:var(--color-overlay-panel);--notify-dismiss-background-hover:var(--color-overlay-panel-soft);--z-notify:1200;--motion-duration-fast:120ms;--motion-duration-base:160ms;--motion-duration-slow:280ms;--motion-ease-out:cubic-bezier(0.16,1,0.3,1);--motion-ease-in-out:cubic-bezier(0.4,0,0.2,1);--modal-motion-duration:var(--motion-duration-base)}:root[data-theme=light]{--color-page:#f7f8fc;--color-page-alt:#f2f4f8;--color-surface:#fff;--color-surface-alt:#f8fafc;--color-bg:var(--color-surface);--color-card:#fff;--color-card-private:#f3ecff;--color-card-critical:#ffecee;--color-panel:#fcfdff;--color-panel-hover:#eff2f9;--color-border:#d2dbec;--color-border-subtle:#e5eaf2;--color-accent:#6366f1;--color-accent-strong:#4f46e5;--color-accent-pressed:#4338ca;--color-accent-override:#540011;--color-accent-strong-override:#fe0032;--color-accent-pressed-override:#a90021;--color-primary:var(--color-accent-strong);--color-secondary:var(--color-accent);--color-logo-accent:var(--color-accent-strong);--color-logo-wordmark:#28364d;--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:#0f172a;--color-logo-background-inverse:var(--color-white);--color-info:#3b82f6;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(59,130,246,.14);--color-info-border:rgba(59,130,246,.35);--color-info-on:#e3f2ff;--color-muted-strong:#475569;--color-text:#181f2c;--color-text-strong:#0c101a;--color-text-inverse:#fff;--color-text-muted:#667085;--color-muted:#8892a6;--color-muted-alt:#788296;--color-subtle-text:#8892a6;--color-subtle:#f3f5fa;--color-surface-sunken:#e8ebf4;--color-surface-muted:#ecf0f9;--color-critical:#dc3646;--color-critical-strong:#b92037;--color-danger-surface:#fce2e6;--color-danger-border:rgba(220,54,70,.35);--color-danger-on:#60121f;--color-warning:#eab308;--color-warning-strong:#ca8a04;--color-warning-surface:rgba(253,224,71,.35);--color-warning-border:rgba(234,179,8,.35);--color-warning-glass:rgba(253,224,71,.18);--color-warning-on:#5c3702;--color-success:#16a34a;--color-success-strong:#15803d;--color-success-surface:#defaec;--color-success-border:rgba(34,197,94,.3);--color-success-on:#125430;--color-private:#8b5cf6;--color-private-strong:#7c3aed;--color-private-surface:#ede9fe;--color-private-border:rgba(139,92,246,.32);--color-private-on:#4a1d96;--color-neutral-700:#475569;--color-neutral-600:#667085;--color-neutral-surface:#e8ecf4;--color-neutral-border:#cdd5e2;--color-neutral-on:#3e485c;--color-white:#fff;--color-black:#000;--color-overlay:rgba(15,23,42,.3);--color-overlay-black:rgba(15,23,42,.7);--color-overlay-muted:rgba(60,75,105,.18);--color-overlay-strong:rgba(15,23,42,.56);--color-overlay-darker:rgba(12,18,32,.68);--color-overlay-panel:rgba(248,250,255,.92);--color-overlay-panel-soft:rgba(244,247,255,.78);--color-overlay-panel-tint:rgba(146,170,211,.24);--color-overlay-panel-glass:hsla(0,0%,100%,.85);--color-overlay-panel-glass-soft:rgba(246,249,255,.7);--color-overlay-panel-gradient-start:hsla(0,0%,100%,.95);--color-overlay-panel-gradient-end:rgba(232,236,244,.92);--color-modal-backdrop:rgba(15,23,42,.28);--color-modal-surface:hsla(0,0%,100%,.94);--color-overlay-veil:rgba(103,112,133,.45);--color-overlay-banner-bottom:hsla(0,0%,100%,.6);--color-overlay-banner-transparent:hsla(0,0%,100%,0);--color-overlay-backdrop:rgba(15,23,42,.2);--scrollbar-track:color-mix(in srgb,var(--color-sidebar-border-strong) 40%,transparent);--scrollbar-thumb:color-mix(in srgb,var(--color-accent) 64%,transparent);--scrollbar-thumb-hover:color-mix(in srgb,var(--color-accent-strong) 76%,transparent);--color-sidebar-surface:hsla(0,0%,100%,.9);--color-sidebar-surface-alt:rgba(236,240,247,.72);--color-sidebar-border:rgba(184,194,212,.28);--color-sidebar-border-strong:rgba(148,163,184,.36);--color-sidebar-hover:color-mix(in srgb,var(--color-accent) 16%,transparent);--color-sidebar-hover-strong:color-mix(in srgb,var(--color-accent-strong) 24%,transparent);--color-sidebar-glow:color-mix(in srgb,var(--color-accent) 36%,transparent);--color-sidebar-accent-start:color-mix(in srgb,var(--color-accent-strong) 88%,transparent);--color-sidebar-accent-end:color-mix(in srgb,var(--color-accent) 82%,transparent);--color-sidebar-text-muted:var(--color-text-muted);--sidebar-icon-filter:brightness(0) saturate(100%);--color-surface-tint-subtle:rgba(15,23,42,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.22);--color-border-translucent-bright:rgba(148,163,184,.28);--color-border-translucent-stronger:rgba(148,163,184,.32);--color-border-translucent-strongest:rgba(148,163,184,.36);--color-border-translucent-glow:rgba(148,163,184,.45);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(148,163,184,.25);--color-border-info-soft:rgba(59,130,246,.32);--color-border-sidebar-strong:rgba(102,112,133,.75);--color-ring-private:rgba(139,92,246,.5);--color-ring-private-hover:rgba(168,85,247,.6);--color-ring-critical:rgba(220,54,70,.35);--color-ring-critical-soft:rgba(220,54,70,.3);--color-ring-critical-hover:rgba(220,54,70,.4);--color-ring-critical-strong:rgba(220,54,70,.5);--color-ring-alert:rgba(239,68,68,.48);--color-gradient-visibility-start:rgba(99,102,241,.28);--color-gradient-visibility-end:rgba(129,140,248,.24);--color-white-soft:hsla(0,0%,100%,.08);--color-white-softer:hsla(0,0%,100%,.24);--color-white-softest:hsla(0,0%,100%,.32);--color-shadow-floating:rgba(15,23,42,.18);--color-shadow-elevated:rgba(15,23,42,.16);--color-shadow-panel:rgba(15,23,42,.12);--color-shadow-notification:rgba(15,23,42,.14);--color-shadow-intense:rgba(15,23,42,.22);--color-shadow-sidebar:rgba(15,23,42,.28);--color-shadow-modal:rgba(15,23,42,.28);--color-divider-strong:rgba(203,213,225,.6);--color-text-frosted-strong:rgba(40,54,77,.85);--color-text-frosted:rgba(61,74,98,.8);--color-text-frosted-soft:rgba(82,96,122,.72)}:root:not([data-theme]),:root[data-theme=dark]{--color-page:#060a12;--color-page-alt:#080c16;--color-surface:#0a0e1a;--color-surface-alt:#0e1422;--color-bg:var(--color-surface);--color-card:#121a2c;--color-card-private:#261c3e;--color-card-critical:#3a141c;--color-panel:#101828;--color-panel-hover:#182234;--color-border:#3d5070;--color-border-subtle:#26344c;--color-accent:#818cf8;--color-accent-strong:#6366f1;--color-accent-pressed:#4f46e5;--color-accent-override:#540011;--color-accent-strong-override:#fe0032;--color-accent-pressed-override:#a90021;--color-primary:var(--color-accent-strong);--color-secondary:#38bdf8;--color-logo-accent:var(--color-accent-strong);--color-logo-wordmark:#c6cfde;--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:#0c121e;--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#3884ff;--color-info-pressed:#2563eb;--color-info-glass:rgba(56,132,255,.22);--color-info-border:rgba(96,165,250,.42);--color-info-on:#ebf4ff;--color-muted-strong:#ced7e8;--color-text:#e2e8f0;--color-text-strong:#f4f7ff;--color-text-inverse:#0c121e;--color-text-muted:#a5b3c9;--color-muted:#94a3b8;--color-muted-alt:#808ba2;--color-subtle-text:#a8b4cd;--color-subtle:#1c263a;--color-surface-sunken:rgba(13,19,32,.92);--color-surface-muted:rgba(18,26,44,.82);--color-critical:#ef5362;--color-critical-strong:#dc2626;--color-danger-surface:rgba(220,38,38,.28);--color-danger-border:rgba(220,38,38,.45);--color-danger-on:#ffe4e9;--color-warning:#facc15;--color-warning-strong:#eab308;--color-warning-surface:rgba(253,224,71,.22);--color-warning-border:rgba(250,204,21,.42);--color-warning-glass:rgba(253,224,71,.2);--color-warning-on:#1a1200;--color-success:#22c55e;--color-success-strong:#16a34a;--color-success-surface:rgba(22,163,74,.24);--color-success-border:rgba(34,197,94,.45);--color-success-on:#d2fce4;--color-private:#a855f7;--color-private-strong:#8b5cf6;--color-private-surface:rgba(124,58,237,.26);--color-private-border:rgba(168,85,247,.45);--color-private-on:#efe6ff;--color-neutral-700:#3a4b6e;--color-neutral-600:#5a6985;--color-neutral-surface:rgba(99,114,144,.24);--color-neutral-border:rgba(99,114,144,.35);--color-neutral-on:#d2dcee;--color-white:#fff;--color-black:#000;--color-overlay:rgba(8,11,20,.72);--color-overlay-black:rgba(0,0,0,.88);--color-overlay-muted:rgba(12,18,30,.6);--color-overlay-strong:rgba(8,12,24,.82);--color-overlay-darker:rgba(5,8,16,.9);--color-overlay-panel:rgba(14,20,34,.92);--color-overlay-panel-soft:rgba(18,26,42,.78);--color-overlay-panel-tint:rgba(56,93,160,.36);--color-overlay-panel-glass:rgba(14,24,42,.86);--color-overlay-panel-glass-soft:rgba(16,28,48,.72);--color-overlay-panel-gradient-start:rgba(18,26,44,.92);--color-overlay-panel-gradient-end:rgba(10,16,30,.92);--color-modal-backdrop:rgba(5,8,14,.68);--color-modal-surface:rgba(14,22,38,.88);--color-overlay-veil:rgba(4,6,12,.94);--color-overlay-banner-bottom:rgba(0,0,0,.6);--color-overlay-banner-transparent:transparent;--color-overlay-backdrop:rgba(5,8,14,.75);--scrollbar-track:color-mix(in srgb,var(--color-sidebar-surface-alt) 54%,transparent);--scrollbar-thumb:color-mix(in srgb,var(--color-accent) 72%,transparent);--scrollbar-thumb-hover:color-mix(in srgb,var(--color-accent-strong) 84%,transparent);--color-sidebar-surface:rgba(12,18,30,.94);--color-sidebar-surface-alt:rgba(10,18,32,.8);--color-sidebar-border:rgba(86,106,142,.26);--color-sidebar-border-strong:rgba(112,133,170,.42);--color-sidebar-hover:color-mix(in srgb,var(--color-accent) 22%,transparent);--color-sidebar-hover-strong:color-mix(in srgb,var(--color-accent-strong) 32%,transparent);--color-sidebar-glow:color-mix(in srgb,var(--color-accent) 42%,transparent);--color-sidebar-accent-start:color-mix(in srgb,var(--color-accent) 92%,transparent);--color-sidebar-accent-end:color-mix(in srgb,var(--color-accent-strong) 88%,transparent);--color-sidebar-text-muted:var(--color-text-muted);--sidebar-icon-filter:brightness(0) invert(1);--color-surface-tint-subtle:rgba(94,113,161,.12);--color-border-translucent:rgba(99,114,144,.22);--color-border-translucent-strong:rgba(110,130,170,.28);--color-border-translucent-bright:rgba(148,163,184,.35);--color-border-translucent-stronger:rgba(148,163,184,.38);--color-border-translucent-strongest:rgba(198,207,222,.45);--color-border-translucent-glow:rgba(129,140,248,.55);--color-border-translucent-medium:rgba(99,114,144,.28);--color-border-neutral-soft:rgba(99,114,144,.3);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(32,46,68,.88);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,83,98,.42);--color-ring-critical-soft:rgba(239,83,98,.35);--color-ring-critical-hover:rgba(239,83,98,.5);--color-ring-critical-strong:rgba(220,38,38,.6);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-intense:rgba(250,204,21,.48);--color-shadow-sidebar:rgba(0,0,0,.45);--color-shadow-modal:rgba(8,11,30,.55);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:80%}@media (min-width:768px){html{font-size:100%}}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{--app-header-centerline:calc(env(safe-area-inset-top, 0) + var(--app-header-centerline-offset));font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}:root[data-theme-accent=override]{--color-accent:var(--color-accent-override);--color-accent-strong:var(--color-accent-strong-override);--color-accent-pressed:var(--color-accent-pressed-override)}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:400px){.\!container{max-width:400px!important}.container{max-width:400px}}@media (min-width:480px){.\!container{max-width:480px!important}.container{max-width:480px}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.app-shell__header{position:sticky;top:env(safe-area-inset-top,0);z-index:var(--z-app-header);padding-top:calc(var(--space-sm) + env(safe-area-inset-top, 0));padding-bottom:var(--space-sm);background-color:transparent;background-image:var(--surface-overlay-banner-gradient-header);background-repeat:no-repeat;background-size:100% 100%}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.author-pic{display:block;height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.header-icon-toggle{outline:2px solid transparent;outline-offset:2px}.header-icon-toggle:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.header-icon-toggle{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);padding:0;border:none;background:transparent;color:var(--color-text-muted);line-height:1}.header-icon-toggle[data-theme-state=light]{color:var(--color-text-strong)}.header-icon-toggle[data-theme-state=dark]{color:var(--color-text)}.header-icon-toggle__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--space-lg);block-size:var(--space-lg)}.header-icon-toggle__icon{inline-size:100%;block-size:100%;display:none;fill:currentColor}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]),.header-icon-toggle__icon-wrapper[data-theme-icon-state=light]{color:inherit}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]) .header-icon-toggle__icon--dark,.header-icon-toggle__icon-wrapper[data-theme-icon-state=dark] .header-icon-toggle__icon--light,.header-icon-toggle__icon-wrapper[data-theme-icon-state=light] .header-icon-toggle__icon--dark{display:block}#profileUnreadDot{position:absolute;top:var(--space-2xs);right:var(--space-2xs);width:var(--space-sm);height:var(--space-sm);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--color-page);background-color:var(--status-danger);display:none;pointer-events:none}#profileUnreadDot.is-visible{display:block}.header-icon-toggle[data-theme-state=light]:focus-visible,.header-icon-toggle[data-theme-state=light]:hover{color:var(--color-text)}.header-icon-toggle[data-theme-state=dark]:focus-visible,.header-icon-toggle[data-theme-state=dark]:hover{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]:focus-visible,.header-icon-toggle[aria-pressed=true]:hover{color:var(--color-text-strong)}.bv-modal.header-search__region,.profile-pane.header-search__region{display:none}.header-search__region{display:none;flex:1 1 0%;justify-content:center}@media (min-width:768px){.header-search__region{display:flex}}.header-search__region{min-width:0;padding-inline:clamp(var(--space-md),4vw,var(--space-3xl))}.header-search{display:flex;align-items:center;gap:.75rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.4;background-color:var(--surface-overlay-panel);padding-left:1rem;padding-right:1rem;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);backdrop-filter:blur(var(--popover-backdrop-blur));-webkit-backdrop-filter:blur(var(--popover-backdrop-blur));padding-block:calc(var(--space-sm)*.9);inline-size:min(100%,var(--header-search-max-inline))}.header-search:focus-within{border-color:var(--color-accent-strong)}.header-search__icon{display:block;height:1.25rem;width:1.25rem;background-color:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}.header-search__icon--filter{mask-image:url(../assets/svg/filter.svg);-webkit-mask-image:url(../assets/svg/filter.svg)}.header-search__icon--submit{mask-image:url(../assets/svg/search.svg);-webkit-mask-image:url(../assets/svg/search.svg)}.header-search__filter{outline:2px solid transparent;outline-offset:2px}.header-search__filter:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.header-search__filter{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);color:var(--color-accent);inline-size:calc(var(--icon-size-lg)*.9);block-size:calc(var(--icon-size-lg)*.9);min-inline-size:calc(var(--icon-size-lg)*.9);min-block-size:calc(var(--icon-size-lg)*.9)}.header-search__filter:focus-visible,.header-search__filter:hover{color:var(--color-accent-strong)}.header-search__input{flex:1 1 0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);outline:2px solid transparent;outline-offset:2px}.header-search__input::-moz-placeholder{color:var(--text-muted)}.header-search__input::placeholder{color:var(--text-muted)}.header-search__input{min-width:0}.header-search__input:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.header-search__submit{outline:2px solid transparent;outline-offset:2px}.header-search__submit:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.header-search__submit{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-accent-strong);color:var(--color-white);inline-size:calc(var(--icon-size-lg)*.9);block-size:calc(var(--icon-size-lg)*.9);min-inline-size:calc(var(--icon-size-lg)*.9);min-block-size:calc(var(--icon-size-lg)*.9);padding:0}.header-search__submit:hover{background-color:var(--color-accent)}.header-search__submit:focus-visible{background-color:var(--color-accent-pressed)}.bv-logo{--logo-wordmark-color:var(--color-logo-wordmark);--logo-accent-color:var(--color-logo-accent);--logo-background-color:var(--color-logo-background)}.bv-logo[data-variant=inverse]{--logo-wordmark-color:var(--color-logo-wordmark-inverse);--logo-background-color:var(--color-logo-background-inverse)}.bv-logo[data-wordmark=current]{--logo-wordmark-color:currentColor}.bv-logo[data-accent=current]{--logo-accent-color:currentColor}.bv-logo[data-background=transparent]{--logo-background-color:transparent}.bv-logo__wordmark{fill:var(--logo-wordmark-color);color:var(--logo-wordmark-color)}.bv-logo__accent{fill:var(--logo-accent-color);color:var(--logo-accent-color)}.bv-logo__background{fill:var(--logo-background-color);color:var(--logo-background-color)}.markdown-prose{color:var(--color-text)}.markdown-prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem}.markdown-prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.markdown-prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-primary);text-decoration:none;font-weight:500}.markdown-prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.markdown-prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.markdown-prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.markdown-prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.markdown-prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--color-border-subtle);border-top-width:1px;margin-top:2rem;margin-bottom:2rem}.markdown-prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--color-muted);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1rem;margin-bottom:1rem;padding-inline-start:1em;border-left-width:4px;border-left-color:var(--color-border-subtle);padding-left:1rem}.markdown-prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.markdown-prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.markdown-prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-2xl);margin-top:.5rem;margin-bottom:1rem;line-height:1.1111111}.markdown-prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.markdown-prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-xl);margin-top:1.25rem;margin-bottom:.75rem;line-height:1.3333333}.markdown-prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.markdown-prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:var(--font-size-lg);margin-top:1rem;margin-bottom:.75rem;line-height:1.6}.markdown-prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.markdown-prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);max-width:100%;height:auto}.markdown-prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.markdown-prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-secondary);font-weight:500;font-size:var(--font-size-sm);background-color:var(--color-page-alt);padding:.2rem .4rem;border-radius:var(--radius-md);font-family:var(--font-family-mono)}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.markdown-prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.markdown-prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-text-strong);background-color:var(--color-page-alt);overflow-x:auto;font-weight:400;font-size:var(--font-size-sm);line-height:1.7142857;margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);padding-inline-end:1.1428571em;padding-inline-start:1.1428571em;padding:1rem;font-family:var(--font-family-mono)}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.markdown-prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.markdown-prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.markdown-prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.markdown-prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.markdown-prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.markdown-prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.markdown-prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.markdown-prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.markdown-prose{--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-lead:#4b5563;--tw-prose-links:var(--color-primary);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-subtle);--tw-prose-quotes:var(--color-muted);--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:var(--color-secondary);--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:var(--color-border-subtle);--tw-prose-td-borders:var(--color-border-subtle);--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.6}.markdown-prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5rem;margin-bottom:.5rem}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.markdown-prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.markdown-prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.markdown-prose{font-family:var(--font-family-sans)}.markdown-prose :where(h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:600;margin-top:.75rem;margin-bottom:.5rem}.markdown-prose :where(ul,ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;padding-left:1.25rem}.markdown-prose :where(a:hover):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration:underline}.markdown-prose{max-width:none;line-height:1.625;color:var(--text-primary);--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-invert-headings:var(--color-text-strong);--tw-prose-lead:var(--color-text);--tw-prose-links:var(--color-accent-strong);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-translucent-strong);--tw-prose-quotes:var(--color-text-strong);--tw-prose-quote-borders:var(--color-border-subtle);--tw-prose-captions:var(--color-text-muted);--tw-prose-code:var(--color-text-strong);--tw-prose-pre-code:var(--color-text);--tw-prose-pre-bg:var(--surface-muted);--tw-prose-th-borders:var(--color-border);--tw-prose-td-borders:var(--color-border-subtle)}.markdown-prose :where(h1,h2,h3,h4,h5,h6){color:var(--color-text-strong)}.markdown-prose :where(h1,h2,h3,h4,h5,h6) strong{color:inherit}.markdown-prose a{color:var(--color-accent-strong);text-decoration-color:color-mix(in srgb,var(--color-accent-strong) 65%,transparent);text-decoration-thickness:var(--link-underline-thickness);text-underline-offset:.2em}.markdown-prose a:focus-visible,.markdown-prose a:hover{color:var(--color-accent);text-decoration-line:underline}.markdown-prose blockquote{border-radius:var(--radius-md);border-left-width:4px;border-color:var(--border-subtle);background-color:var(--surface-muted);--tw-bg-opacity:0.5;padding:.5rem 1rem;color:var(--text-muted)}.markdown-prose :where(pre,code){font-family:var(--font-family-mono)}.markdown-prose code{border-radius:var(--radius-md);background-color:var(--surface-muted);padding:.125rem .25rem;color:var(--color-accent-strong)}.markdown-prose pre{overflow-x:auto;border-radius:var(--radius-lg);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-muted);padding:1rem;color:var(--text-primary)}.markdown-prose pre code{background-color:transparent;color:inherit;padding:0}.\!popover,.popover{position:relative;display:inline-flex}.popover-panel,.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover-panel:focus-visible,.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.popover-panel,.popover__panel{pointer-events:none;z-index:var(--z-overlay-popover);min-width:var(--menu-min-width);max-width:var(--popover-inline-safe-max);--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--overlay-panel-radius);border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.4;background-color:var(--surface-overlay-panel);padding:var(--overlay-panel-padding-block) var(--overlay-panel-padding-inline);font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);opacity:0;--tw-shadow:var(--overlay-panel-shadow);--tw-shadow-colored:var(--overlay-panel-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:var(--surface-overlay-panel);--tw-shadow:var(--tw-shadow-colored);transition-property:opacity;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);position:var(--popover-strategy,fixed);left:var(--popover-left,0);top:var(--popover-top,0);max-width:var(--popover-max-width,none);max-height:var(--popover-max-height,none)}.popover-panel,.popover-panel[data-state=open],.popover__panel,.popover__panel[data-state=open]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.popover-panel[data-state=open],.popover__panel[data-state=open]{pointer-events:auto;--tw-scale-x:1;--tw-scale-y:1;opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{pointer-events:none;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.search-filter-chip{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.search-filter-chip[data-state=on]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong);color:var(--color-white)}[data-popover-arrow=true]{left:var(--popover-arrow-left,auto);right:var(--popover-arrow-right,auto);top:var(--popover-arrow-top,auto);bottom:var(--popover-arrow-bottom,auto)}.ds-overlay-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-backdrop-color);backdrop-filter:blur(var(--overlay-backdrop-blur));-webkit-backdrop-filter:blur(var(--overlay-backdrop-blur))}.popover-panel[data-variant=zap],.popover__panel[data-variant=zap]{background:var(--color-overlay-veil);color:var(--color-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-stronger);box-shadow:var(--shadow-popover-zap);backdrop-filter:blur(var(--popover-backdrop-blur));-webkit-backdrop-filter:blur(var(--popover-backdrop-blur))}.\!btn{outline:2px solid transparent;outline-offset:2px}.\!btn:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!btn[data-size=sm],.btn-ghost[data-size=sm],.btn[data-size=sm]{padding:.375rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.\!btn[data-size=sm],.btn-ghost[data-size=sm],.btn[data-size=sm]{gap:.375rem}.\!btn:hover,.btn:hover{background-color:var(--color-accent)}.\!btn:focus-visible{background-color:var(--color-accent-pressed)}.btn:focus-visible{background-color:var(--color-accent-pressed)}.\!btn:disabled,.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-link{outline:2px solid transparent;outline-offset:2px}.btn-link:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn-link{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;color:var(--color-accent);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.btn-link:focus-visible,.btn-link:hover{color:var(--color-accent-strong);text-decoration-line:underline}.progress,[data-progress-meter]{--progress-height:var(--progress-height-md);--progress-track:var(--progress-track-color);--progress-fill:var(--progress-fill-color);--progress-radius-current:var(--progress-radius);display:block;width:100%;height:var(--progress-height);border:none;border-radius:var(--progress-radius-current);overflow:hidden;background-color:var(--progress-track);-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar,[data-progress-meter]::-webkit-progress-bar{background-color:var(--progress-track);border-radius:var(--progress-radius-current)}.progress::-webkit-progress-value,[data-progress-meter]::-webkit-progress-value{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-webkit-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress::-moz-progress-bar,[data-progress-meter]::-moz-progress-bar{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-moz-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress.progress--surface,.progress[data-variant=surface],[data-progress-meter].progress--surface,[data-progress-meter][data-variant=surface]{--progress-track:var(--color-panel)}.progress.progress--accent,.progress[data-variant=accent],[data-progress-meter].progress--accent,[data-progress-meter][data-variant=accent]{--progress-fill:var(--color-info-strong)}.btn-ghost{outline:2px solid transparent;outline-offset:2px}.btn-ghost:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn-ghost[data-size=sm]{padding:.375rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);gap:.375rem}.btn-ghost:hover{background-color:var(--color-accent)}.btn-ghost:focus-visible{background-color:var(--color-accent-pressed)}.btn-ghost:disabled{cursor:not-allowed;opacity:.6}body.iframe-form button.btn-ghost{align-self:flex-start;margin-top:var(--space-md)}.btn-ghost{border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.6;background-color:transparent;color:var(--text-primary);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (prefers-reduced-motion:reduce){.btn-ghost{transition-property:none}}.btn-ghost:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.btn-ghost:focus-visible{background-color:var(--surface-panel-hover)}.btn-ghost:disabled{pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[data-variant=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;color:var(--color-critical)}.btn-ghost[data-variant=critical]:focus-visible,.btn-ghost[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2;color:var(--color-critical-strong)}.login-option{outline:2px solid transparent;outline-offset:2px}.login-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.login-option{position:relative;display:flex;height:100%;width:100%;flex-direction:column;gap:1rem;overflow:hidden;border-width:1px;border-color:var(--border-default);background-color:var(--surface-overlay-panel-soft);padding:1.25rem 1.5rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);border-radius:calc(var(--radius-xl)*1.12);isolation:isolate;backdrop-filter:blur(var(--blur-modal-backdrop));background-image:linear-gradient(140deg,color-mix(in srgb,var(--surface-overlay-panel-soft) 88%,transparent) 0,color-mix(in srgb,var(--surface-overlay-panel) 72%,transparent) 100%);transform:translateZ(0);transition-property:border-color,box-shadow,transform}.login-option:after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;transform:translate3d(0,14%,0);transition:opacity .22s ease,transform .22s ease;background:radial-gradient(115% 115% at 0 0,color-mix(in srgb,var(--status-neutral) 32%,transparent) 0,transparent 65%)}.login-option:focus-visible,.login-option:hover{border-color:var(--border-strong);box-shadow:var(--shadow-modal);transform:translate3d(0,var(--motion-login-option-hover-translate),0)}.login-option:focus-visible:after,.login-option:hover:after{opacity:.65;transform:translateZ(0)}.login-option:disabled,.login-option[aria-disabled=true]{cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transform:none}.login-option[data-tone=accent]:after{background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--status-info) 38%,transparent) 0,transparent 65%)}.login-option[data-tone=warning]:after{background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--status-warning) 42%,transparent) 0,transparent 65%)}.login-option--primary{border-color:var(--border-default)}.login-option--ghost{background-image:linear-gradient(145deg,color-mix(in srgb,var(--surface-overlay-panel-soft) 82%,transparent) 0,color-mix(in srgb,var(--surface-overlay-panel-soft) 68%,transparent) 100%)}.login-option--outline{border-color:var(--border-strong)}.login-option--link{border-width:1px;border-color:transparent;background-color:transparent;color:var(--color-accent);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.login-option__capabilities,.login-option__copy,.login-option__header,.login-option__status{position:relative;z-index:1}.login-option__header{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:1rem}.login-option__copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:.5rem}.login-option__eyebrow{font-size:var(--font-size-2xs);font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.18em}.login-option:focus-visible .login-option__eyebrow,.login-option:hover .login-option__eyebrow{color:var(--text-primary)}.login-option__label{font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;color:var(--text-primary)}.login-option__description{font-size:var(--font-size-sm);line-height:var(--line-height-snug);line-height:1.625}.login-option__chevron,.login-option__description{color:var(--text-muted)}.login-option__chevron{display:inline-flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--surface-overlay-panel);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:inset 0 0 0 var(--border-width-hairline) color-mix(in srgb,var(--border-overlay) 60%,transparent)}.login-option:focus-visible .login-option__chevron,.login-option:hover .login-option__chevron{background-color:var(--color-accent);color:var(--color-white);box-shadow:none}.login-option__status{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}.login-option__capabilities{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}.btn-ghost[aria-pressed=true],.btn-ghost[data-state=active]{border-color:transparent;background-color:var(--color-primary);color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[aria-pressed=true]:focus-visible,.btn-ghost[aria-pressed=true]:hover,.btn-ghost[data-state=active]:focus-visible,.btn-ghost[data-state=active]:hover{background-color:var(--color-accent-strong)}.\!badge,.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-extra-wide);color:var(--status-neutral-on)}.\!badge[data-variant=info],.badge[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.\!badge[data-variant=success],.badge[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.\!badge[data-variant=warning],.badge[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.\!badge[data-variant=critical],.badge[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.\!badge[data-variant=private],.badge[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.\!badge[data-variant=neutral],.badge[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}.moderation-badge{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);border-radius:var(--radius-xl);border-width:1px;padding:.375rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:none;letter-spacing:-.025em;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.moderation-badge--interactive{pointer-events:auto}.moderation-badge__actions{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:var(--space-sm)}.moderation-badge__label{display:inline-flex;align-items:center;gap:var(--space-xs);white-space:nowrap}.moderation-badge[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on);box-shadow:0 var(--shadow-badge-offset-y) var(--shadow-badge-blur) color-mix(in srgb,var(--status-warning) 18%,transparent)}.moderation-badge[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on);box-shadow:0 var(--shadow-badge-offset-y) var(--shadow-badge-blur) color-mix(in srgb,var(--status-neutral) 18%,transparent)}.moderation-badge__icon{display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--status-warning-surface);background-color:color-mix(in srgb,var(--status-warning) 18%,transparent);color:var(--status-warning-on)}.moderation-badge[data-variant=neutral] .moderation-badge__icon{background-color:var(--status-neutral-surface);background-color:color-mix(in srgb,var(--status-neutral) 18%,transparent);color:var(--status-neutral-on)}.moderation-badge__icon-mark{height:.875rem;width:.875rem}.moderation-badge__text{white-space:nowrap}.moderation-badge__action,.moderation-badge__text{font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;letter-spacing:-.025em}.moderation-badge__action{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-warning-border);background-color:var(--status-warning-surface);padding:.25rem .75rem;text-transform:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);background-color:color-mix(in srgb,var(--status-warning) 16%,transparent);border-color:color-mix(in srgb,var(--status-warning-border) 80%,transparent);color:var(--status-warning-on)}.moderation-badge[data-variant=warning] .moderation-badge__action:hover{background-color:color-mix(in srgb,var(--status-warning) 24%,transparent)}.moderation-badge[data-variant=neutral] .moderation-badge__action{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);background-color:color-mix(in srgb,var(--status-neutral) 16%,transparent);border-color:color-mix(in srgb,var(--status-neutral-border) 80%,transparent);color:var(--status-neutral-on)}.moderation-badge[data-variant=neutral] .moderation-badge__action:hover{background-color:color-mix(in srgb,var(--status-neutral) 24%,transparent)}.moderation-badge__action:focus-visible{outline:var(--outline-thick-width) solid color-mix(in srgb,var(--status-warning) 38%,transparent);outline-offset:var(--space-3xs)}.moderation-badge[data-variant=neutral] .moderation-badge__action:focus-visible{outline:var(--outline-thick-width) solid color-mix(in srgb,var(--status-neutral) 38%,transparent)}.moderation-badge__action[disabled]{cursor:wait;opacity:.7}.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--status-neutral-on)}.pill[data-size=compact]{padding:.125rem .5rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.pill[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.pill[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.pill[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.pill[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.pill[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.pill[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}.\!menu,.menu{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.menu__heading{padding-left:1rem;padding-right:1rem;padding-bottom:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}.menu__separator{margin-top:.5rem;margin-bottom:.5rem;height:1px;background-color:var(--border-default);--tw-bg-opacity:0.2}.menu__item{outline:2px solid transparent;outline-offset:2px}.menu__item:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.menu__item{position:relative;display:flex;width:100%;align-items:center;gap:.75rem;border-radius:var(--radius-md);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:var(--motion-ease-in-out)}.menu__item:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.menu__item[data-state=active]{background-color:var(--color-accent);--tw-bg-opacity:0.2;color:var(--color-accent-strong)}.menu__item[data-variant=critical]{color:var(--color-critical-strong)}.menu__item[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2}.menu__item:disabled,.menu__item[aria-disabled=true]{cursor:not-allowed;opacity:.6}.menu__item:disabled,.menu__item:disabled:hover,.menu__item[aria-disabled=true],.menu__item[aria-disabled=true]:hover{background-color:transparent;color:var(--text-muted)}.\!card{min-width:0!important;--video-card-lift-translate-y:0!important;--video-card-backdrop-opacity:0!important;--video-card-backdrop-translate-y:var(--space-md-plus)!important;--video-card-backdrop-scale:1.08!important;--video-card-backdrop-blur:var(--blur-thumbnail-blur)!important}.card{min-width:0;--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:var(--space-md-plus);--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur)}.\!card{outline:2px solid transparent;outline-offset:2px}.\!card:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.card{outline:2px solid transparent;outline-offset:2px}.card:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!card{transform:translate3d(0,var(--video-card-lift-translate-y),0)!important;transition-property:transform,box-shadow,border-color,background-color,color!important;will-change:transform!important;isolation:isolate!important}.card{transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.\!card:before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:var(--video-card-backdrop-opacity)!important;background-image:var(--video-card-thumb-url,none)!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:cover!important;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale))!important;filter:blur(var(--video-card-backdrop-blur))!important;transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out)!important;pointer-events:none!important;will-change:opacity,transform,filter!important}.card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.\!card>*{position:relative!important;z-index:1!important}.card>*{position:relative;z-index:1}.card--compact{display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-md)}.card--compact .video-card__media{inline-size:clamp(var(--video-card-compact-media-min),calc(var(--video-modal-secondary-min)*.4),var(--video-card-compact-media-max));flex-basis:clamp(var(--video-card-compact-media-min),calc(var(--video-modal-secondary-min)*0.4),var(--video-card-compact-media-max));display:block;flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}.card--compact .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm);padding:var(--space-md)}.card--compact .video-card__title{font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;line-height:1.375}.card--compact .video-card__author-name{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.card--compact .video-card__meta{margin-top:0;display:flex;align-items:center;gap:.5rem;color:var(--text-muted-strong)}.card--compact .video-card__meta,.card--compact .video-card__meta .view-count-text{font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.card:focus-within,.card:hover{--video-card-lift-translate-y:var(--motion-video-card-hover-translate);--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ );--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong)}.\!card:focus-within,.\!card:hover{--video-card-lift-translate-y:var(--motion-video-card-hover-translate)!important;--video-card-backdrop-opacity:0.425!important;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ )!important;--video-card-backdrop-scale:1.12!important;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong)!important;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-within,.card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-within,.\!card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=critical],.card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.\!card[data-state=private],.card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=disabled],.card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card__title{transition:color var(--motion-duration-base) var(--motion-ease-in-out)}.video-card__title:focus-visible,.video-card__title:hover{color:var(--color-accent)}.form-control{outline:2px solid transparent;outline-offset:2px}.form-control:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.form-control{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-control::-moz-placeholder{color:var(--text-muted)}.form-control::placeholder{color:var(--text-muted)}.form-control:hover{border-color:var(--border-default)}.form-control:focus-visible{border-color:var(--color-accent-strong)}.form-control:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.form-control:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],.form-control[data-state=locked],.input[data-state=locked],.select[data-state=locked],.textarea[data-state=locked],select.form-control[data-state=locked],textarea.form-control[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.form-control[data-state=locked]:focus-visible,.input[data-state=locked]:focus-visible,.select[data-state=locked]:focus-visible,.textarea[data-state=locked]:focus-visible,select.form-control[data-state=locked]:focus-visible,textarea.form-control[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,.form-control[data-state=locked]:disabled,.input[data-state=locked]:disabled,.select[data-state=locked]:disabled,.textarea[data-state=locked]:disabled,select.form-control[data-state=locked]:disabled,textarea.form-control[data-state=locked]:disabled{cursor:default;opacity:1}.\!input{outline:2px solid transparent;outline-offset:2px}.\!input:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!input::-moz-placeholder{color:var(--text-muted)}.\!input::placeholder{color:var(--text-muted)}.\!input:hover{border-color:var(--border-default)}.\!input:focus-visible{border-color:var(--color-accent-strong)}.\!input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],select.\!input[data-state=locked],textarea.\!input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.\!input[data-state=locked]:focus-visible,select.\!input[data-state=locked]:focus-visible,textarea.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,select.\!input[data-state=locked]:disabled,textarea.\!input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.\!input{transition:none}}body.iframe-form label+.\!input{margin-top:var(--space-xs)}.input{outline:2px solid transparent;outline-offset:2px}.input:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:var(--text-muted)}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:var(--border-default)}.input:focus-visible{border-color:var(--color-accent-strong)}.input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.input[data-state=locked],select.input[data-state=locked],textarea.input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.input[data-state=locked]:focus-visible,select.input[data-state=locked]:focus-visible,textarea.input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.input[data-state=locked]:disabled,select.input[data-state=locked]:disabled,textarea.input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.input{transition:none}}body.iframe-form label+.input{margin-top:var(--space-xs)}.textarea{outline:2px solid transparent;outline-offset:2px}.textarea:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.textarea{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.textarea::-moz-placeholder{color:var(--text-muted)}.textarea::placeholder{color:var(--text-muted)}.textarea:hover{border-color:var(--border-default)}.textarea:focus-visible{border-color:var(--color-accent-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.textarea:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.textarea[data-state=locked],select.textarea[data-state=locked],textarea.textarea[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.textarea[data-state=locked]:focus-visible,select.textarea[data-state=locked]:focus-visible,textarea.textarea[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.textarea[data-state=locked]:disabled,select.textarea[data-state=locked]:disabled,textarea.textarea[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.textarea{transition:none}}body.iframe-form label+.textarea{margin-top:var(--space-xs)}.textarea{min-height:var(--form-textarea-min-height);resize:vertical}.select{outline:2px solid transparent;outline-offset:2px}.select:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.select{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.select::-moz-placeholder{color:var(--text-muted)}.select::placeholder{color:var(--text-muted)}.select:hover{border-color:var(--border-default)}.select:focus-visible{border-color:var(--color-accent-strong)}.select:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.select:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.select[data-state=locked],select.select[data-state=locked],textarea.select[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.select[data-state=locked]:focus-visible,select.select[data-state=locked]:focus-visible,textarea.select[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.select[data-state=locked]:disabled,select.select[data-state=locked]:disabled,textarea.select[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.select{transition:none}}body.iframe-form label+.select{margin-top:var(--space-xs)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;background-image:linear-gradient(135deg,transparent 50%,var(--select-arrow-color) 50%),linear-gradient(45deg,var(--select-arrow-color) 50%,transparent 50%),linear-gradient(to right,var(--color-border-subtle),var(--color-border-subtle));background-position:right var(--form-select-icon-offset) center,right var(--form-select-icon-gap) center,right var(--form-select-icon-hit-area) center;background-size:var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-divider-width) 60%;background-repeat:no-repeat}.select,.select:hover{--select-arrow-color:var(--color-border)}.select:focus-visible{--select-arrow-color:var(--color-accent-strong)}.select:disabled{--select-arrow-color:var(--color-border-subtle)}.select:invalid{--select-arrow-color:var(--color-critical)}.\!checkbox{outline:2px solid transparent;outline-offset:2px}.\!checkbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.checkbox{outline:2px solid transparent;outline-offset:2px}.checkbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:hover,.checkbox:hover{border-color:var(--border-default)}.\!checkbox:disabled,.checkbox:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!checkbox:after{content:""!important}.checkbox:after{content:""}.\!checkbox:after,.checkbox:after{pointer-events:none;height:.5rem;width:.75rem;border-bottom-width:2px;border-right-width:2px;border-color:var(--color-white);opacity:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)!important}.checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)}.\!checkbox:checked,.\!checkbox[aria-checked=true],.checkbox:checked,.checkbox[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after,.checkbox:checked:after,.checkbox[aria-checked=true]:after{opacity:1}.checkbox:checked:after,.checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)!important}.switch{outline:2px solid transparent;outline-offset:2px}.switch:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.switch{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;cursor:pointer;align-items:center;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--border-subtle);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch,.switch:before{transition-duration:.15s;transition-duration:var(--motion-duration-base)}.switch:before{content:"";pointer-events:none;position:absolute;left:.125rem;top:50%;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--radius-full);background-color:var(--surface-base);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.switch.is-on,.switch[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.switch.is-on:before,.switch[aria-checked=true]:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:reduce){.\!checkbox,.\!checkbox:after,.checkbox,.checkbox:after,.form-control,.menu__item,.popover-panel,.popover__panel,.switch,.switch:before{transition:none!important}}.bv-modal{position:fixed;inset:0;z-index:var(--z-modal-root);display:flex;align-items:center;justify-content:center;padding:1.5rem}@media (min-width:640px){.bv-modal{padding:2rem}}.bv-modal.hidden,.bv-modal[hidden]{display:none!important}.bv-modal__panel{outline:2px solid transparent;outline-offset:2px}.bv-modal__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.bv-modal__panel{position:relative;z-index:var(--z-modal-content);width:100%;max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.bv-modal__panel:focus-visible{border-color:var(--color-border-translucent-bright)}.bv-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal-overlay);--tw-backdrop-saturate:saturate(1.5);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-modal-backdrop,var(--color-overlay-muted));backdrop-filter:blur(var(--blur-modal-backdrop));-webkit-backdrop-filter:blur(var(--blur-modal-backdrop))}.bv-modal-backdrop[data-variant=veil]{--tw-backdrop-blur:blur(64px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-overlay-veil)}.bv-modal-backdrop[data-variant=muted]{background-color:var(--color-overlay-muted)}.modal-sheet{outline:2px solid transparent;outline-offset:2px}.modal-sheet:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-sheet{z-index:var(--z-modal-content);max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.modal-sheet:focus-visible{border-color:var(--color-border-translucent-bright)}@media (max-width:calc(1024px - var(--breakpoint-edge-offset ))){.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}#playerModal>.modal-sheet{max-width:none;width:100%;min-height:100%;padding:0;border-radius:0;box-shadow:none;border:none;background-color:var(--color-surface);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:1 1 auto}#modalContainer>[id$=Modal]:not(#playerModal) .modal-sheet{z-index:var(--z-modal-content)}#modalContainer>#eventDetailsModal .modal-sheet,#modalContainer>#profileModal .modal-sheet,#profileModal[data-modal-stack=top] .modal-sheet{z-index:var(--z-modal-top-content)}#modalContainer>#loginModal .modal-sheet,#shareNostrModal .modal-sheet{z-index:var(--z-modal-peak-content)}.modal-sheet{position:relative;margin-top:0;margin-bottom:0;width:100%;overflow:hidden}#profileModal .modal-sheet{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;border:none}.modal-sheet{max-width:var(--modal-sheet-inline-max);overscroll-behavior:contain}@media (max-width:calc(1024px - var(--breakpoint-edge-offset ))){.bv-modal{align-items:stretch;justify-content:stretch;padding:0}.bv-modal__panel,.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);padding:1.75rem 2rem 1rem;background:transparent;border:0}.modal-header[data-variant=flush]{padding:0;background:transparent}.modal-close{outline:2px solid transparent;outline-offset:2px}.modal-close:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-close{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:var(--color-text-frosted-strong)}.modal-close:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.modal-back{display:inline-flex;align-items:center;gap:.5rem}@media (min-width:1024px){.modal-back{display:none!important}}.modal-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.modal-body{padding:.5rem 2rem 2rem;overscroll-behavior:contain;scrollbar-width:thin}.modal-body::-webkit-scrollbar{width:var(--scrollbar-thin-width)}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:var(--color-border-translucent);border-radius:var(--radius-full)}.modal-embed-frame{display:flex;height:var(--modal-embed-height);max-height:var(--modal-embed-height);width:100%;flex-direction:column}.modal-footer{flex-direction:column;padding:1rem 2rem 2rem}.modal-alert,.modal-footer{display:flex;gap:.75rem}.modal-alert{align-items:flex-start;border-radius:var(--radius-md);border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.6;padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);backdrop-filter:blur(var(--blur-modal-alert));background-color:var(--color-warning-glass)}.modal-alert,.modal-alert__icon{color:var(--status-warning-strong)}.modal-alert__icon{margin-top:.125rem;height:1.25rem;width:1.25rem;flex-shrink:0}.modal-tile{border-radius:var(--radius-xl);border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-overlay-panel-soft);padding:1rem 1.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-frosted-primary);background-color:var(--color-overlay-panel-glass-soft)}.modal-tile>h3{font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--text-primary)}.modal-primary{outline:2px solid transparent;outline-offset:2px}.modal-primary:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-primary{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-primary[data-size=sm]{padding:.375rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);gap:.375rem}.modal-primary:hover{background-color:var(--color-accent)}.modal-primary:focus-visible{background-color:var(--color-accent-pressed)}.modal-primary:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}body.iframe-form button.modal-primary{align-self:flex-start;margin-top:var(--space-md)}.modal-primary{width:100%;justify-content:center}@media (prefers-reduced-motion:reduce){.modal-primary{transition-property:none}}.grid-stack{display:grid;gap:var(--space-lg)}.grid-stack[data-variant=cards]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}.grid-stack[data-orientation=vertical]{display:flex;flex-direction:column;gap:var(--space-md)}.bv-stack{display:flex;flex-direction:column;gap:var(--space-lg)}.bv-stack--tight{gap:var(--space-md)}.bv-grid-video{display:grid;gap:var(--space-xl);padding-top:var(--space-lg);padding-bottom:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(var(--grid-card-min-width),1fr))}.\!card[data-alert=nsfw-owner],.card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.\!card[data-alert=nsfw-owner]:hover,.card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card img[data-thumbnail-state=blurred],.\!card img[data-visual-state=blurred],.card img[data-thumbnail-state=blurred],.card img[data-visual-state=blurred],.channel-profile-container img[data-visual-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.card img[data-thumbnail-state=blurred],.card img[data-visual-state=blurred],.channel-profile-container img[data-visual-state=blurred]{filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.\!card img[data-thumbnail-state=blurred],.\!card img[data-visual-state=blurred]{filter:blur(var(--blur-thumbnail-blur))!important;transform:scale(1.05)!important}.channel-moderation-badge-anchor{display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none;width:100%}.channel-moderation-badge-anchor:empty{display:none}.channel-moderation-badge-anchor>[data-moderation-badge=true]{pointer-events:auto;max-width:min(100%,var(--moderation-badge-max-inline))}#playerModal .video-modal__video{position:relative}#playerModal .video-modal__video[data-visual-state=blurred] .video-modal__media{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}#playerModal .video-modal__moderation-bar{width:100%;display:flex;align-items:center;justify-content:center;padding-bottom:var(--space-md)}#playerModal .video-modal__moderation-bar[hidden]{display:none}#playerModal .video-modal__moderation-bar .moderation-badge{width:100%;max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:.75rem 1rem}#playerModal .video-modal__moderation-bar .moderation-badge__label{flex:1 1 auto}#playerModal .video-modal__moderation-bar .moderation-badge__actions{flex-shrink:0}.\!card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy],.card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.video-visibility-toggle{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-default);background-color:var(--surface-panel);padding:.25rem}.video-visibility-toggle__option{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--surface-panel);padding:.5rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.video-visibility-toggle__option:not(.is-disabled):hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.video-visibility-toggle__option[data-active=true]{border-width:1px;border-color:var(--color-accent);--tw-border-opacity:0.6;color:var(--text-primary);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-visibility-toggle__option.is-disabled{cursor:not-allowed;opacity:.45}.player-modal__container,.video-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}.player-modal__container{gap:1.5rem}#playerModal{--player-modal-vertical-padding:var(--space-md-plus);--player-modal-primary-inline-padding-lg:clamp(var(--space-sm),2.75vw,var(--space-lg))}#playerModal>.bv-modal__panel{max-width:none;border-radius:0;flex-direction:column;align-items:stretch;justify-content:flex-start}#playerModal>.bv-modal__panel,.video-modal__panel{width:100%;min-height:100%;padding:0;box-shadow:none;border:none;background-color:var(--color-surface);display:flex;flex:1 1 auto}.video-modal__panel{position:relative;z-index:var(--z-modal-content);flex-direction:column;overflow:visible;margin:0;border-radius:0}#playerModal .watch-container{width:100%;max-width:var(--player-modal-inline-max,var(--layout-player-max-width));margin-inline:auto;padding-inline:var(
+ --player-modal-inline-padding,clamp(var(--space-md),4vw,var(--space-xl-plus))
+ );overflow:visible}#playerModal .watch-container.video-modal__similar{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .video-modal__primary>.watch-container:first-child{padding-block-start:var(--player-modal-vertical-padding)}#playerModal .video-modal__primary>.watch-container:last-child,#playerModal .video-modal__secondary>.watch-container:last-child{padding-block-end:var(--player-modal-vertical-padding)}#playerModal .modal-nav .watch-container{max-width:none;margin-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-md-plus)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text);min-width:0;overflow-wrap:break-word;word-break:break-word}@media (min-width:1024px){.video-modal__headline #videoTitle.video-modal__title{flex:1 1 0%;min-width:0;max-width:calc(100% - var(--space-3xl) - var(--space-md))}.video-modal__headline .video-modal__status{flex:0 0 auto;max-width:clamp(var(--space-xl),25%,var(--space-3xl));margin-left:auto}}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}#playerModal .channel-card,#playerModal .player-modal__module{display:flex;border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .player-modal__module{flex-direction:column;gap:clamp(var(--space-2xs),1vw,var(--space-sm));width:100%;padding:clamp(var(--space-xs),1vw,var(--space-sm))}#playerModal .player-modal__module-title{margin:0;font-size:var(--font-size-lg);font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .player-modal__module-list{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;margin:0;padding:0;list-style:none}#playerModal .video-modal__similar .player-modal__module{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding:clamp(var(--space-2xs),.6vw,var(--space-xs));border-width:0;box-shadow:none;background-color:transparent}#playerModal .video-modal__similar .player-modal__module-title{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs));padding-bottom:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .player-modal__module-scroll{max-height:clamp(var(--player-modal-module-scroll-min-height),calc(100vh - var(--player-modal-vertical-padding)*2 - var(--space-2xl)),var(--player-modal-module-scroll-max-height));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--space-xs)}#playerModal .video-modal__similar .player-modal__module-scroll{max-height:none;overflow:visible;padding-inline-end:0;scrollbar-gutter:auto}#playerModal .player-modal__module-scroll>li{scroll-margin-block:var(--space-xs)}@media (max-width:480px){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:var(--space-sm)}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--surface-overlay-panel);background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface-overlay-panel) 94%,transparent) 0,color-mix(in srgb,var(--surface-overlay-panel) 88%,transparent) 100%);border-bottom:var(--border-width-hairline) solid var(--border-overlay);backdrop-filter:blur(var(--modal-nav-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-nav-backdrop-blur))}#playerModal .modal-nav__bar{justify-content:flex-start;padding-block:var(--space-xs);padding-inline:clamp(var(--space-sm),2.5vw,var(--space-lg))}#playerModal .modal-nav__bar,#playerModal .modal-nav__rail{display:flex;width:100%;align-items:center;gap:.5rem}#playerModal .modal-nav__rail{justify-content:space-between}#playerModal .modal-nav__slot{display:flex;align-items:center;gap:.5rem}#playerModal .modal-nav__slot--context{justify-content:flex-end;margin-inline-start:auto;min-inline-size:0}#playerModal .modal-nav__context{font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:0;align-self:stretch}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);inline-size:var(--icon-size-md);block-size:var(--icon-size-md);background:var(--surface-overlay-panel-tint);border:var(--border-width-hairline) solid var(--border-overlay);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--surface-overlay-panel-soft);border-color:var(--border-overlay-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),46vw,var(--video-modal-secondary-max));--video-modal-gap:clamp(var(--space-2xs),0.85vw,var(--space-sm));display:grid;gap:var(--video-modal-gap);width:min(100%,var(--video-modal-layout-max));margin-inline:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"primary" "secondary";align-items:start}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),30vw,var(--video-modal-secondary-max));grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:stretch;grid-auto-flow:column}.video-modal__primary{min-width:0;min-height:0;grid-area:primary}.video-modal__secondary{min-width:var(--video-modal-secondary-min);min-height:0;max-width:var(--video-modal-secondary-size);grid-area:secondary;height:100%}#playerModal .video-modal__layout .watch-container{max-width:none;margin-inline:0;width:100%}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),28vw,var(--video-modal-secondary-max))}}#playerModal .video-modal__layout{display:grid}@media (min-width:1024px){#playerModal .video-modal__layout{grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:stretch;grid-auto-flow:column}#playerModal .video-modal__primary{grid-area:primary}#playerModal .video-modal__secondary{grid-area:secondary}#playerModal .modal-nav__bar,#playerModal .video-modal__primary{--player-modal-inline-padding:var(
+ --player-modal-primary-inline-padding-lg,clamp(var(--space-sm),2.75vw,var(--space-lg))
+ )}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}.video-modal__primary{gap:1.5rem}.video-modal__primary,.video-modal__secondary{display:flex;flex-direction:column;min-width:0;min-height:0}.video-modal__secondary{gap:1rem;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card),#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(var(--video-modal-item-media-min),18vw,var(--video-modal-item-media-max))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(var(--video-modal-item-media-min),18vw,var(--video-modal-item-media-max))!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}.player-modal__similar-card{outline:2px solid transparent;outline-offset:2px}.player-modal__similar-card:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.player-modal__similar-card{position:relative;display:flex;width:100%;min-width:0;align-items:flex-start;gap:.75rem;border-radius:var(--radius-xl);padding:.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.player-modal__similar-card:focus-within,.player-modal__similar-card:hover{background-color:var(--surface-panel-hover)}.player-modal__similar-card-media{position:relative;display:block;flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg);background-color:var(--surface-alt);width:var(--similar-card-media-width);aspect-ratio:16/9;background-image:var(--similar-card-thumb-url,none);background-position:50%;background-size:cover}@media (max-width:640px){.player-modal__similar-card-media{width:var(--similar-card-media-width-sm)}}.player-modal__similar-card-media img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.player-modal__similar-card-content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:.25rem}.player-modal__similar-card-title{font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;line-height:1.375;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.player-modal__similar-card-title:focus-visible,.player-modal__similar-card:hover .player-modal__similar-card-title{color:var(--color-accent-strong)}.player-modal__similar-card-author{display:flex;min-width:0;align-items:center}.player-modal__similar-card-author-meta{display:flex;min-width:0;flex-direction:column}.player-modal__similar-card-author-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.player-modal__similar-card:hover .player-modal__similar-card-author-name{color:var(--color-text-strong)}.player-modal__similar-card-author-npub{display:none}.player-modal__similar-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight);color:var(--text-muted-strong);min-width:0}.player-modal__similar-card-timestamp{white-space:nowrap}.video-modal__stage{position:relative;isolation:isolate;overflow:visible;--video-modal-ambient-bleed:clamp(var(--space-2xl),12vw,var(--space-5xl));--video-modal-ambient-scale:1.38;--video-modal-ambient-blur:clamp(var(--video-modal-ambient-blur-min),20vw,var(--video-modal-ambient-blur-max));--video-modal-ambient-opacity:1}.video-modal__video{position:relative;z-index:1;border-radius:var(--radius-xl);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus));background-color:transparent;box-shadow:0 0 0 var(--border-width-hairline) color-mix(in srgb,var(--color-border-strong) 8%,transparent) inset;overflow:visible}.video-modal__ambient{position:absolute;inset:calc(var(--video-modal-ambient-bleed)*-1);border-radius:calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));pointer-events:none;z-index:0;display:block;overflow:visible}.video-modal__ambient:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-overlay-strong) 18%,transparent) 0,color-mix(in srgb,var(--color-overlay) 34%,transparent) 62%,transparent 100%);opacity:.9;mix-blend-mode:screen;pointer-events:none}.video-modal__ambient-canvas{position:relative;width:100%;height:100%;display:block;transform:scale(var(--video-modal-ambient-scale));filter:blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24);opacity:var(--video-modal-ambient-opacity)}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-3xl));z-index:1}.video-modal__status{flex-basis:clamp(var(--space-xl),25%,var(--space-3xl));max-width:clamp(var(--space-xl),25%,var(--space-3xl))}.video-modal__details{position:relative;z-index:2;margin-top:var(--space-lg)}}#playerModal .video-modal__video video{position:relative;z-index:1;background-color:var(--color-black);border-radius:var(--radius-lg);box-shadow:var(--shadow-video-modal);max-height:min(80vh,56.25vw);-o-object-fit:contain;object-fit:contain}.video-modal__media{display:block;aspect-ratio:16/9;width:100%;-o-object-fit:contain;object-fit:contain}.video-modal__details{display:flex;flex-direction:column;gap:1.5rem}.video-modal__meta{border-bottom-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;padding-bottom:1rem}.video-modal__tags{margin-left:-.25rem;margin-right:-.25rem;display:flex;gap:.5rem;padding-left:.25rem;padding-right:.25rem}.video-modal__similar .video-modal__tags{margin-bottom:clamp(var(--space-xs),.9vw,var(--space-md))}.video-modal__tags[hidden]{display:none}.video-modal__tags[data-fade]{position:relative}.video-modal__tags[data-fade]:after,.video-modal__tags[data-fade]:before{content:"";position:sticky;top:0;bottom:0;width:var(--space-lg);pointer-events:none;z-index:1}.video-modal__tags[data-fade]:before{left:0;background:linear-gradient(to right,var(--surface-overlay-muted),transparent)}.video-modal__tags[data-fade]:after{right:0;background:linear-gradient(to left,var(--surface-overlay-muted),transparent)}.video-tag-strip{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-xs);overflow:hidden}.video-tag-strip--scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-xs);scrollbar-width:none;-ms-overflow-style:none}.video-tag-strip--scroll::-webkit-scrollbar{display:none;width:0;height:0}.video-tag-pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight);font-weight:500;color:var(--status-neutral-on);position:relative;justify-content:center;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;min-height:calc(var(--space-sm) + var(--space-xs));margin-inline-end:.25rem}.video-tag-pill__label{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.video-tag-pill__icon,.video-tag-pill__label{transition-duration:.15s}.video-tag-pill__icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transform:scale(.8)}.video-tag-pill__icon svg{height:.75rem;width:.75rem}.video-tag-pill:focus-visible .video-tag-pill__label,.video-tag-pill:hover .video-tag-pill__label{opacity:0}.video-tag-pill:focus-visible .video-tag-pill__icon,.video-tag-pill:hover .video-tag-pill__icon{opacity:1;transform:scale(1)}.video-modal__actions-row{display:flex;width:100%;flex-wrap:wrap;align-items:flex-start;-moz-column-gap:.75rem;column-gap:.75rem;row-gap:.75rem}@media (min-width:640px){.video-modal__actions-row{-moz-column-gap:1rem;column-gap:1rem}}.video-modal__actions-group,.video-modal__reactions{flex:1 1 var(--menu-min-width);min-inline-size:0}.video-modal__reactions{display:flex;flex-basis:100%;flex-wrap:wrap;align-items:flex-start;gap:.75rem}@media (min-width:640px){.video-modal__reactions{gap:1rem}}@media (min-width:768px){.video-modal__reactions{flex-basis:auto}}.video-modal__reaction-buttons{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem}.video-modal__reaction-button{--video-modal-reaction-active-bg:color-mix(in srgb,var(--color-accent) 22%,var(--surface-overlay-panel));--video-modal-reaction-active-border:color-mix(in srgb,var(--color-accent) 38%,var(--border-overlay))}.video-modal__reaction-button[aria-pressed=true]{color:var(--color-accent-strong);background-color:var(--video-modal-reaction-active-bg);border-color:var(--video-modal-reaction-active-border)}.video-modal__reaction-button[aria-pressed=true] .video-modal__reaction-count{color:var(--color-accent-strong)}.video-modal__reaction-count{font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;color:var(--text-muted)}.video-modal__reaction-meter{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;flex:1 1 var(--menu-min-width);max-inline-size:100%}.video-modal__reaction-meter-label{font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-muted);min-inline-size:var(--video-modal-reaction-label-min-inline)}.video-modal__reaction-meter-track{position:relative;flex:1 1 auto;inline-size:100%;block-size:var(--space-xs);border-radius:var(--radius-full);background-color:var(--color-border-muted);overflow:hidden}.video-modal__reaction-meter-fill{position:absolute;inset-inline-start:0;inset-block-start:0;block-size:100%;max-inline-size:100%;inline-size:var(--video-modal-reaction-fill,0);width:var(--video-modal-reaction-fill,0);background-image:linear-gradient(90deg,var(--color-accent) 0,var(--color-accent-strong) 100%);transition:inline-size var(--motion-duration-base) var(--motion-ease-out)}.video-modal__reaction-meter-fill--empty{inline-size:0;width:0}.video-modal__actions-group{display:flex;flex-basis:100%;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:.75rem}@media (min-width:768px){.video-modal__actions-group{flex-basis:auto;justify-content:flex-end;margin-inline-start:auto}}.video-modal__action-button{display:inline-flex;height:2.75rem;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);min-width:var(--video-modal-action-min-width);padding-inline:var(--space-md);border-width:var(--border-width-hairline);border-style:solid}.bv-modal.video-modal__action-label,.profile-pane.video-modal__action-label,.video-modal__action-label{display:none}@media (min-width:640px){.video-modal__action-label{display:inline}}.video-modal__action-icon{height:1.25rem;width:1.25rem}.video-modal__channel,.video-modal__description,.video-modal__stats{border-radius:1rem;border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;background-color:var(--surface-base);padding:1rem 1.25rem;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-modal__description-body{overflow-wrap:anywhere;word-break:break-word}.video-modal__description-body a{color:var(--color-accent-strong);text-decoration:underline;text-decoration-color:currentColor;word-break:break-word}.video-modal__description-body a:focus-visible,.video-modal__description-body a:hover{color:var(--color-accent-pressed)}.video-modal__comments{border-radius:1rem;border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;background-color:var(--surface-base);padding:1.25rem;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.comment-thread,.video-modal__comments{display:flex;flex-direction:column;gap:var(--space-lg)}.comment-thread__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm)}.comment-thread__title{font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;color:var(--text-primary)}.comment-thread__count,.comment-thread__empty{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted);margin:0}.comment-thread__empty{padding:var(--space-md);border-radius:var(--radius-lg);border:var(--border-width-hairline) dashed color-mix(in srgb,var(--border-default) 40%,transparent);background-color:var(--surface-alt)}.comment-thread__list{display:flex;flex-direction:column;gap:var(--space-md);margin:0;padding:0;list-style:none}.comment-thread__item{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);padding-block:var(--space-sm);border-bottom:var(--border-width-hairline) solid var(--border-subtle)}.comment-thread__item:last-child{border-bottom:none;padding-bottom:0}.comment-thread__avatar{inline-size:var(--comment-avatar-size);block-size:var(--comment-avatar-size)}.comment-thread__avatar img{border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover;inline-size:100%;block-size:100%}.comment-thread__content{display:flex;flex-direction:column;gap:var(--space-xs);min-inline-size:0}.comment-thread__meta{font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}.comment-thread__author{font-weight:600;color:var(--text-primary)}.comment-thread__timestamp{color:var(--text-muted)}.comment-thread__body{color:var(--text-primary);line-height:1.6;word-break:break-word}.comment-thread__actions{font-size:var(--font-size-xs);line-height:var(--line-height-tight);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}.comment-thread__actions button{outline:2px solid transparent;outline-offset:2px}.comment-thread__actions button:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.comment-thread__actions button{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-base);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.comment-thread__actions button:focus-visible,.comment-thread__actions button:hover{color:var(--text-primary);border-color:var(--border-default)}.comment-thread__replies{display:flex;flex-direction:column;gap:var(--space-md);margin:0;margin-inline-start:calc(var(--space-lg) + var(--space-sm));padding-inline-start:var(--space-md);padding-block-start:var(--space-md);border-inline-start:var(--border-width-hairline) solid var(--border-subtle);list-style:none}.comment-thread__load-more{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-base);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.comment-thread__load-more:focus-visible,.comment-thread__load-more:hover{border-color:var(--border-default);color:var(--text-primary);background-color:color-mix(in srgb,var(--surface-alt) 70%,transparent)}.comment-thread__disabled{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted);border-radius:var(--radius-lg);border:var(--border-width-hairline) dashed color-mix(in srgb,var(--border-default) 32%,transparent);background-color:var(--surface-alt);padding:var(--space-md)}.comment-composer{display:flex;flex-direction:column;gap:var(--space-md);border-top:var(--border-width-hairline) solid var(--border-subtle);padding-top:var(--space-lg)}.comment-composer__field{display:flex;flex-direction:column;gap:var(--space-2xs)}.comment-composer__label{font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;color:var(--text-primary)}.comment-composer__textarea{min-block-size:var(--comment-composer-min-height)}.comment-composer__footer{display:flex;flex-direction:column;gap:var(--space-sm)}.comment-composer__hint{font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted);margin:0}.comment-composer__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-sm)}.comment-composer__char-count{font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--text-muted)}.comment-composer__submit{outline:2px solid transparent;outline-offset:2px}.comment-composer__submit:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.comment-composer__status{margin:0}@media (min-width:640px){.comment-composer__footer{flex-direction:row;align-items:center;justify-content:space-between}}.video-modal__progress{height:.5rem;width:100%;overflow:hidden;border-radius:var(--radius-full);background-color:var(--border-subtle)}.video-modal__stat-metrics{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}.profile-modal{display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-block-size:100%;max-block-size:none;overflow:hidden;--modal-sheet-inline-max:var(--profile-modal-inline-max);--profile-modal-scale:0.9;--profile-modal-gap:calc((var(--space-md) - var(--space-3xs))*var(--profile-modal-scale));--profile-modal-padding-inline:calc((var(--space-lg) - var(--space-md))*var(--profile-modal-scale));--profile-modal-padding-block-start:calc((var(--space-md) - var(--space-2xs))*var(--profile-modal-scale));--profile-modal-padding-block-end:calc((var(--space-lg) - var(--space-sm))*var(--profile-modal-scale));--profile-modal-nav-gap:calc(var(--space-xs)*var(--profile-modal-scale))}.profile-modal__content{display:flex;flex:1 1 auto;flex-direction:column;block-size:100%;min-block-size:0;transform:scale(var(--profile-modal-scale));transform-origin:top center}.profile-modal__active-profile{outline:2px solid transparent;outline-offset:2px}.profile-modal__active-profile:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.profile-modal__active-profile{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem}.profile-modal__active-details{display:flex;flex:1 1 var(--profile-modal-active-min-width);flex-direction:column;gap:var(--space-2xs);min-inline-size:0}.profile-modal__active-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}.profile-hashtag-list{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}.profile-hashtag-item{display:inline-flex;align-items:center;gap:var(--space-3xs);padding-block:var(--space-3xs);padding-inline:var(--space-sm);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-panel);color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--font-lineheight-tight)}.profile-hashtag-remove{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--space-md);block-size:var(--space-md);border-radius:var(--radius-full);color:var(--color-text-muted);background:transparent;border:none;padding:0;cursor:pointer}.profile-hashtag-remove:hover{color:var(--color-text)}.profile-modal__remove-button{border-width:2px}.profile-modal__remove-button:focus-visible{--tw-ring-color:var(--color-critical-strong)}.profile-modal__add-profile{--tw-ring-color:var(--color-ring-alert);outline:2px solid transparent;outline-offset:2px}.profile-modal__add-profile:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.profile-modal__add-profile{position:relative;display:flex;width:100%;align-items:center;justify-content:flex-start;gap:1rem;border-radius:var(--radius-xl);padding:1rem 1.25rem;text-align:left;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);border:var(--outline-thick-width) solid var(--color-ring-alert);background-color:var(--surface-panel-hover)}.profile-modal__add-profile:hover{background-color:color-mix(in srgb,var(--surface-panel-hover) 88%,var(--color-ring-alert) 12%)}.profile-modal__add-profile:focus-visible{background-color:color-mix(in srgb,var(--surface-panel-hover) 80%,var(--color-ring-alert) 20%)}.profile-modal__add-profile-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:color-mix(in srgb,var(--color-ring-alert) 18%,var(--surface-panel));color:var(--color-ring-alert)}.profile-modal__body{overflow:hidden;overflow-x:hidden;padding-block-start:var(--profile-modal-padding-block-start);padding-block-end:var(--profile-modal-padding-block-end);padding-inline:var(--profile-modal-padding-inline)}.profile-modal__body,.profile-modal__layout{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--profile-modal-gap);inline-size:100%;min-block-size:0}.profile-modal__header{align-items:center}.profile-modal__header-title{display:flex;align-items:center;gap:var(--space-sm)}.profile-modal__menu{display:flex;flex-direction:column;gap:var(--space-sm)}.profile-modal__pane-wrapper{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.profile-modal__nav{display:flex;flex-wrap:wrap;gap:var(--profile-modal-nav-gap);align-self:flex-start;overflow-x:visible}.profile-nav__unread-dot{position:absolute;top:50%;left:-6px;right:auto;width:var(--space-sm);height:var(--space-sm);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--surface-panel);background-color:var(--status-danger);display:none;pointer-events:none;transform:translateY(-50%)}.profile-nav__unread-dot.is-visible{display:block}.profile-modal__panes{flex:1 1 auto;block-size:100%;min-block-size:0;overflow-y:auto;padding-inline-end:var(--profile-modal-scrollbar-offset);scrollbar-gutter:stable}.profile-modal__panes,.profile-pane{display:flex;flex-direction:column;overflow-x:hidden}.profile-pane{min-block-size:auto}@media (min-width:768px){#profilePaneMessages{overflow:hidden}#dmAppShellMount,#profilePaneMessages{height:100%;min-height:0}}.profile-pane.hidden{display:none!important}@supports not (scrollbar-gutter:stable){.profile-modal__panes{padding-inline-end:calc(var(--profile-modal-scrollbar-offset) + var(--space-2xs))}}@media (max-width:calc(1024px - var(--breakpoint-edge-offset ))){.profile-modal__layout[data-mobile-view=menu] .profile-modal__pane-wrapper,.profile-modal__layout[data-mobile-view=pane] .profile-modal__menu{display:none}}@media (min-width:1024px){.profile-modal{max-block-size:var(--modal-shell-max-height)}.profile-modal__body{padding-inline:calc(var(--profile-modal-padding-inline) + var(--space-xs))}.profile-modal__body,.profile-modal__layout{gap:calc(var(--profile-modal-gap) + var(--space-2xs))}.profile-modal__layout{display:grid;align-items:stretch;block-size:100%;grid-template-columns:minmax(var(--profile-modal-nav-min-width),var(--profile-modal-nav-max-width)) minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.profile-modal__nav{flex-direction:column;flex-wrap:nowrap;gap:var(--profile-modal-nav-gap);justify-self:start;inline-size:var(--profile-modal-nav-max-width);min-inline-size:var(--profile-modal-nav-min-width)}.profile-modal__pane-wrapper{block-size:100%}}.beacon-hidden-download,.torrent-download-anchor,[data-beacon-hidden-download]{display:none!important}.beacon-clipboard-offscreen,.torrent-clipboard-textarea,[data-beacon-clipboard-state=offscreen],[data-beacon-clipboard=offscreen]{position:fixed;top:0;left:var(--offscreen-offset);opacity:0;width:0;height:0;pointer-events:none}.beacon-toast-motion,.torrent-toast-motion{transition-property:opacity,transform;will-change:opacity,transform;opacity:0;transform:translateY(var(--toast-translate))}.beacon-toast-motion[data-beacon-motion=enter],.beacon-toast-motion[data-beacon-motion=show],.torrent-toast-motion[data-beacon-motion=enter],.torrent-toast-motion[data-beacon-motion=show]{opacity:1;transform:translateY(0)}.beacon-toast-motion[data-beacon-motion=exit],.torrent-toast-motion[data-beacon-motion=exit]{opacity:0;transform:translateY(var(--toast-translate))}.torrent-toast{pointer-events:auto;width:100%;max-width:28rem;border-radius:var(--radius-lg);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;letter-spacing:-.025em;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-inset:inset}.torrent-toast--info{border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-base);color:var(--text-primary)}.torrent-toast--success{border-width:1px;border-color:var(--color-info);--tw-border-opacity:0.6;background-color:var(--color-info);color:var(--color-white)}.torrent-toast--error{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;background-color:var(--color-critical);color:var(--color-white)}.torrent-toast--warn{border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.7;background-color:var(--status-warning-strong);color:var(--status-warning-strong)}.watch-history-card{min-width:0;--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:var(--space-md-plus);--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur);outline:2px solid transparent;outline-offset:2px}.watch-history-card:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.watch-history-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.watch-history-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.watch-history-card>*{position:relative;z-index:1}.watch-history-card:focus-within,.watch-history-card:hover{--video-card-lift-translate-y:var(--motion-video-card-hover-translate);--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ );--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.watch-history-card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.watch-history-card[data-state=disabled],.watch-history-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.watch-history-card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.watch-history-card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card img[data-thumbnail-state=blurred],.watch-history-card img[data-visual-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.watch-history-card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}#playerModal .player-modal__module-item>.watch-history-card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.watch-history-card:not(.player-modal__similar-card) .video-card__media{width:clamp(var(--video-modal-item-media-min),18vw,var(--video-modal-item-media-max));flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.watch-history-card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md));display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal .player-modal__module-item>.watch-history-card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}.watch-history-card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}@media (min-width:1024px){.watch-history-card:hover .marquee-host.can-marquee .marquee-static{opacity:0}.watch-history-card:hover .marquee-host.can-marquee .marquee-anim{opacity:1}.watch-history-card:hover .marquee-host.can-marquee .marquee-track{animation-play-state:running}}@media (max-width:calc(1024px - var(--breakpoint-edge-offset ))){.watch-history-card[data-mobile-active=true]{--video-card-lift-translate-y:var(--motion-video-card-hover-translate);--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ );--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-mobile-active=true] .video-card__title{color:var(--color-accent)}.watch-history-card[data-mobile-active=true] .marquee-host.can-marquee .marquee-static{opacity:0}.watch-history-card[data-mobile-active=true] .marquee-host.can-marquee .marquee-anim{opacity:1}.watch-history-card[data-mobile-active=true] .marquee-host.can-marquee .marquee-track{animation-play-state:running}}.watch-history-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.25rem;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}@media (prefers-reduced-motion:reduce){.watch-history-card,.watch-history-card[data-motion=enter]{transition-property:none}.watch-history-card[data-motion=enter]{opacity:1;animation:none}}.watch-history-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.watch-history-card{gap:1.5rem;padding:1.25rem}}.watch-history-card [data-thumbnail-state=blurred] img,.watch-history-card [data-visual-state=blurred] img{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.watch-history-card__hidden{margin-top:var(--space-md);border-radius:var(--radius-lg);border-width:1px;border-style:dashed;border-color:var(--border-default);background-color:var(--surface-overlay-panel-soft);font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary)}.watch-history-card__hidden .moderation-badge{align-self:flex-start}#playerModal .channel-card__avatar img[data-visual-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}#playerModal .video-modal__moderation-bar .moderation-badge{--text-status-neutral-on:var(--color-text);--text-status-warning-on:var(--color-warning-on)}#playerModal .video-modal__moderation-bar .moderation-badge[data-variant=neutral]{color:var(--color-text)}.\!container{max-width:var(--layout-docs-max-width)!important;margin:0 auto!important;padding:var(--space-md)!important}.container{max-width:var(--layout-docs-max-width);margin:0 auto;padding:var(--space-md)}.qr-code__table{margin:var(--qr-code-table-margin,0)}.qr-code__cell,.qr-code__table{border:0;border-collapse:collapse}.qr-code__cell{padding:0;margin:0;width:var(--qr-code-cell-width);height:var(--qr-code-cell-height);background-color:var(--qr-code-color-light)}.qr-code__cell--dark{background-color:var(--qr-code-color-dark)}.qr-code__container[data-qr-code-mode=image] .qr-code__canvas{display:none}.qr-code__container[data-qr-code-mode=canvas] .qr-code__canvas,.qr-code__container[data-qr-code-mode=image] .qr-code__image{display:block}.qr-code__container[data-qr-code-mode=canvas] .qr-code__image{display:none}.fade-in{opacity:0;animation:interface-fade-in .28s ease-out forwards;animation-delay:var(--fade-in-delay,0ms)}.fade-in-delay-100{--fade-in-delay:100ms}.fade-in-delay-200{--fade-in-delay:200ms}.fade-in-delay-300{--fade-in-delay:300ms}.\!card[data-motion=enter]{opacity:0!important;animation:card-motion-enter .22s ease-out forwards!important}.card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);flex:0 0 var(--icon-size-lg);line-height:0;background-color:var(--color-neutral-700);color:var(--color-white);border:none;border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}.icon-button:hover{background-color:var(--color-neutral-600)}.icon-button:active,.icon-button:focus{outline:none;box-shadow:0 0 0 var(--icon-button-ring-width) var(--color-ring-alert)}.icon-image{width:var(--icon-size-md);height:var(--icon-size-md);pointer-events:none}.accent-action-button,.channel-action-button{--accent-action-bg:color-mix(in srgb,var(--surface-overlay-panel) 78%,transparent);--accent-action-border:color-mix(in srgb,var(--border-overlay) 92%,transparent);--accent-action-bg-hover:color-mix(in srgb,var(--color-accent) 22%,var(--surface-overlay-panel));--accent-action-ring:color-mix(in srgb,var(--color-accent) 48%,transparent);--accent-action-bg-active:color-mix(in srgb,var(--color-accent-pressed) 28%,var(--surface-overlay-panel));color:var(--color-text);background-color:var(--accent-action-bg);border-color:var(--accent-action-border);border-style:solid;border-width:var(--border-width-hairline)}.accent-action-button:focus-visible,.accent-action-button:hover,.channel-action-button:focus-visible,.channel-action-button:hover{color:var(--color-accent-strong);background-color:var(--accent-action-bg-hover)}.accent-action-button:focus,.accent-action-button:focus-visible,.channel-action-button:focus,.channel-action-button:focus-visible{box-shadow:0 0 0 var(--icon-button-ring-width) var(--accent-action-ring)}.accent-action-button:active,.channel-action-button:active{color:var(--color-accent-pressed);background-color:var(--accent-action-bg-active)}.modal-nav .icon-button{box-shadow:none;padding:0;gap:0;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg)}.modal-nav .icon-button:not(.accent-action-button):not(.channel-action-button){border:none}.modal-meta{gap:var(--space-xs)}.modal-meta,.modal-view-count{display:inline-flex;align-items:center}.modal-view-count{gap:var(--space-2xs);font-size:var(--font-size-sm);line-height:var(--space-md-plus);color:var(--color-muted-alt);white-space:nowrap}.view-count-text{white-space:nowrap;color:var(--color-muted-strong)}.ratio-16-9{position:relative;width:100%;padding-top:56.25%;background-color:var(--color-card)}.ratio-16-9>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#modalContainer{position:fixed;inset:0;z-index:var(--z-modal-root);pointer-events:none;isolation:isolate}#modalContainer>*{pointer-events:auto}#modalContainer>[id$=Modal]:not(#playerModal){z-index:var(--z-modal-root)}#modalContainer>[id$=Modal]:not(#playerModal)>.bv-modal-backdrop{z-index:var(--z-modal-overlay)}#modalContainer>[id$=Modal]:not(#playerModal) .bv-modal__panel{z-index:var(--z-modal-content)}#modalContainer>#profileModal,#profileModal[data-modal-stack=top]{z-index:var(--z-modal-top-root)}#modalContainer>#profileModal>.bv-modal-backdrop,#profileModal[data-modal-stack=top]>.bv-modal-backdrop{z-index:var(--z-modal-top-overlay)}#modalContainer>#profileModal .bv-modal__panel,#profileModal[data-modal-stack=top] .bv-modal__panel{z-index:var(--z-modal-top-content)}#modalContainer>#eventDetailsModal{z-index:var(--z-modal-top-root)}#modalContainer>#eventDetailsModal>.bv-modal-backdrop{z-index:var(--z-modal-top-overlay)}#modalContainer>#eventDetailsModal .bv-modal__panel{z-index:var(--z-modal-top-content)}#shareNostrModal{z-index:var(--z-modal-peak-root)!important}#shareNostrModal>.bv-modal-backdrop{z-index:var(--z-modal-peak-overlay)!important}#shareNostrModal .bv-modal__panel{z-index:var(--z-modal-peak-content)!important}.bv-modal[data-nested-modal-active=true]{pointer-events:none;visibility:hidden}#modalContainer>#loginModal{z-index:var(--z-modal-peak-root)}#modalContainer>#loginModal>.bv-modal-backdrop{z-index:var(--z-modal-peak-overlay)}#modalContainer>#loginModal .bv-modal__panel{z-index:var(--z-modal-peak-content)}#modalContainer>#playerModal{z-index:var(--z-modal-player)}#modalContainer>#playerModal .player-modal__container,#modalContainer>#playerModal .player-modal__content{z-index:var(--z-modal-content)}.modal-always-on-top{z-index:var(--z-modal-always-top)!important}#playerModal{position:fixed;inset:0;z-index:var(--z-modal-player);flex-direction:column;align-items:stretch;justify-content:flex-start;width:100vw;height:100vh;padding:0;background-color:var(--color-surface);color:var(--color-subtle-text);--player-modal-inline-max:var(--layout-player-max-width);--player-modal-inline-padding:clamp(var(--space-md-plus),4vw,var(--space-2xl));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#modalVideo{width:100%;aspect-ratio:16/9;background-color:var(--color-black)}.notification-portal{position:fixed;top:0;left:0;right:0;z-index:var(--z-overlay-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:calc(var(--space-xl) + env(safe-area-inset-top)) var(--space-lg) var(--space-lg);pointer-events:none;opacity:0;transform:translateY(var(--toast-translate));transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}@media (min-width:640px){.notification-portal{padding-inline:var(--space-xl)}}.notification-portal:has(.notification-banner:not(.hidden)){opacity:1;transform:translateY(0)}.notification-portal--active{opacity:1;transform:translateY(0)}.notification-banner,.torrent-toast{--notify-accent:var(--notification-banner-accent);--notify-accent-strong:var(--notification-banner-accent-strong);--notify-border:var(--notification-banner-border);--notify-background:var(--notification-banner-background);--notify-foreground:var(--notification-banner-text);position:relative;display:flex;align-items:center;gap:var(--space-md);width:min(var(--notification-banner-max-inline),100%);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--notify-border);background:var(--notify-background);color:var(--notify-foreground);box-shadow:0 var(--shadow-notification-offset-y) var(--shadow-notification-blur) var(--color-shadow-notification);backdrop-filter:blur(var(--overlay-backdrop-blur));pointer-events:auto;isolation:isolate;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;line-height:1.375;transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}.notification-banner:before,.torrent-toast:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--notify-accent) 0,var(--notify-accent-strong) 100%);opacity:.18;pointer-events:none}.notification-banner>*,.torrent-toast>*{position:relative;z-index:1}.notification-dismiss{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);color:inherit;opacity:.75;background-color:var(--notify-dismiss-background)}.notification-dismiss:focus-visible,.notification-dismiss:hover{opacity:1;background-color:var(--notify-dismiss-background-hover)}.notification-dismiss svg{height:1rem;width:1rem}.notification-banner:not(.hidden){animation:notification-slide-in var(--motion-duration-base) var(--motion-ease-out)}.notification-banner--critical,.torrent-toast--error{--notify-accent:var(--notification-banner-critical-accent);--notify-accent-strong:var(--notification-banner-critical-accent-strong);--notify-border:var(--notification-banner-critical-border);--notify-background:var(--notification-banner-critical-background);--notify-foreground:var(--notification-banner-critical-text)}.notification-banner--success,.torrent-toast--success{--notify-accent:var(--notification-banner-success-accent);--notify-accent-strong:var(--notification-banner-success-accent-strong);--notify-border:var(--notification-banner-success-border);--notify-background:var(--notification-banner-success-background);--notify-foreground:var(--notification-banner-success-text)}.notification-banner--info,.torrent-toast--info{--notify-accent:var(--notification-banner-info-accent);--notify-accent-strong:var(--notification-banner-info-accent-strong);--notify-border:var(--notification-banner-info-border);--notify-background:var(--notification-banner-info-background);--notify-foreground:var(--notification-banner-info-text)}.notification-banner--warning,.torrent-toast--warn{--notify-accent:var(--notification-banner-warning-accent);--notify-accent-strong:var(--notification-banner-warning-accent-strong);--notify-border:var(--notification-banner-warning-border);--notify-background:var(--notification-banner-warning-background);--notify-foreground:var(--notification-banner-warning-text)}.status-banner .status-spinner{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-info-border);border-radius:var(--radius-full);border-top-color:var(--color-info);flex-shrink:0;height:var(--icon-size-md);width:var(--icon-size-md)}.status-banner .status-message{flex:1 1 auto}@keyframes notification-slide-in{0%{opacity:0;transform:translateY(var(--toast-translate))}to{opacity:1;transform:translateY(0)}}.status-spinner--inline{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-border-info-soft);border-radius:var(--radius-full);border-top-color:var(--color-info);display:inline-block;height:var(--space-md);width:var(--space-md)}body.iframe-form{background-color:transparent;color:var(--color-text);font-family:var(--font-family-sans);margin:var(--space-lg)}body.iframe-form .container{width:100%;max-width:100%;margin:0;padding:0}body.iframe-form .\!container{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}body.iframe-form .form-container{background-color:var(--color-surface-alt);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg)}body.iframe-form .form-container>p{margin:0}body.iframe-form form{display:flex;flex-direction:column}body.iframe-form form>*+*{margin-top:var(--space-sm)}body.iframe-form form h1,body.iframe-form form h2{color:var(--color-text);margin-top:var(--space-md)}body.iframe-form label{color:var(--color-subtle-text);display:block;font-weight:600;margin-top:var(--space-sm)}body.iframe-form label+.form-control,body.iframe-form label+.select,body.iframe-form label+.textarea{margin-top:var(--space-xs)}body.iframe-form .checkbox-group,body.iframe-form .radio-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xs)}body.iframe-form .checkbox-group label,body.iframe-form .radio-group label{align-items:center;color:var(--color-subtle-text);display:inline-flex;font-weight:500;gap:var(--space-xs);margin:0}body.iframe-form .checkbox-group input[type=checkbox],body.iframe-form .radio-group input[type=radio]{margin:0}body.iframe-form .radio-group input[type=radio]{accent-color:var(--color-accent-strong)}body.iframe-form button.btn{align-self:flex-start;margin-top:var(--space-md)}body.iframe-form button.\!btn{align-self:flex-start!important;margin-top:var(--space-md)!important}body.iframe-form #status{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 var(--border-width-hairline) var(--color-border-translucent);color:var(--color-subtle-text);min-height:calc(var(--space-2xl) + var(--space-xl));padding:var(--space-sm);white-space:pre-wrap}body.iframe-form .status-line{color:var(--color-subtle-text);margin:var(--space-2xs) 0}body.iframe-form .status-line.error{color:var(--color-critical-strong)}body.iframe-form .status-line.\!error{color:var(--color-critical-strong)!important}body.iframe-form .status-line.success{color:var(--color-info-strong)}body.iframe-form .status-line.\!success{color:var(--color-info-strong)!important}body.iframe-form .status-line.warn{color:var(--color-warning-strong)}@media (max-width:640px){body.iframe-form{margin:var(--space-md)}body.iframe-form .form-container{padding:var(--space-md)}}#sidebarContainer{position:relative;overflow:visible}#sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;height:100dvh;color:var(--color-text-frosted-strong);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overscroll-behavior-inline:contain;touch-action:pan-y;scrollbar-gutter:stable both-edges;background:transparent;border-right:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .2s ease,transform .3s ease;z-index:var(--z-sidebar);box-shadow:none;isolation:isolate}#app.sidebar-collapsed,#sidebar.sidebar-collapsed,#sidebar[data-state=collapsed],body.sidebar-collapsed{--sidebar-width:var(--sidebar-width-collapsed)}#app.sidebar-expanded,#sidebar.sidebar-expanded,#sidebar[data-state=expanded],body.sidebar-expanded{--sidebar-width:var(--sidebar-width-expanded)}#sidebar .sidebar__inner{padding-block-start:max(var(--space-sidebar-shell-block-start),calc(var(--app-header-centerline) - var(--sidebar-control-size)/2));padding-block-end:var(--space-sidebar-shell-block-end);padding-inline:var(--space-sidebar-shell-inline);border-radius:var(--radius-sidebar-shell);border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;transition:color .2s ease}#sidebar .sidebar__inner,.sidebar-scroll{display:flex;flex-direction:column;height:100%;width:100%;overflow:visible}.sidebar-scroll{gap:var(--space-sidebar-scroll-gap);min-height:0;flex:1 1 auto}.sidebar-panel{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--space-sidebar-panel-gap);padding:var(--space-sidebar-panel-padding-block) var(--space-sidebar-panel-padding-inline);border-radius:var(--radius-sidebar-panel);border:none;background:transparent;box-shadow:none;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;isolation:isolate;transition:border-color .2s ease,box-shadow .22s ease,background .22s ease}.sidebar-panel--primary{flex:1 1 auto;min-height:0;padding-block-start:0}.sidebar-panel__header{display:flex;justify-content:flex-end;margin-bottom:var(--space-md)}.sidebar-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:inherit;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;flex-shrink:0;box-sizing:border-box}.sidebar-collapse-toggle:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.sidebar-collapse-toggle:focus-visible{outline:var(--space-3xs) solid var(--color-secondary);outline-offset:var(--space-2xs)}.sidebar-collapse-toggle__icon{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .2s ease}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-xs);opacity:1;transition:opacity .16s ease;width:100%}.sidebar-nav-link{--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-opacity:0;--sidebar-nav-link-highlight-scale:0.96;display:flex;align-items:center;gap:var(--space-sidebar-footer-gap);padding-block:var(--space-sidebar-nav-padding-block);padding-inline-start:var(--space-sidebar-nav-padding-inline-start);padding-inline-end:var(--space-sidebar-nav-padding-inline-end);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);font-size:var(--font-size-sidebar-nav);font-weight:600;letter-spacing:.015em;color:var(--color-text);text-decoration:none;width:100%;position:relative;border:var(--border-width-hairline) solid transparent;background:none;box-shadow:none;transform:translateX(var(--sidebar-nav-translate-x));transition:color .18s ease,border-color .2s ease,box-shadow .22s ease,transform .22s ease;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}.sidebar-nav-link:after,.sidebar-nav-link:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none;transition:opacity .22s ease,transform .24s ease;z-index:-1}.sidebar-nav-link:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:var(--sidebar-nav-link-highlight-opacity);transform:scale(var(--sidebar-nav-link-highlight-scale));filter:saturate(140%)}.sidebar-nav-link:after{background:linear-gradient(105deg,var(--color-sidebar-hover) 0,transparent 75%);opacity:.22;mix-blend-mode:screen;z-index:-2}.sidebar-nav-link:focus-visible,.sidebar-nav-link:hover{--sidebar-nav-link-highlight-opacity:1;--sidebar-nav-link-highlight-scale:1.02;--sidebar-nav-translate-x:var(--space-sidebar-nav-translate);color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible:after,.sidebar-nav-link:hover:after{opacity:.35}.sidebar-nav-link--sub{font-size:var(--font-size-sidebar-subnav);font-weight:500;color:var(--color-sidebar-text-muted);padding-block:var(--space-sidebar-subnav-padding-block);letter-spacing:.02em;--sidebar-nav-link-highlight-opacity:0.25;--sidebar-nav-link-highlight-scale:1}.sidebar-icon{width:var(--space-lg);height:var(--space-lg);min-width:var(--space-lg);min-height:var(--space-lg);flex-shrink:0;display:block;filter:var(--sidebar-icon-filter);transition:filter .18s ease}.sidebar-footer{flex-direction:column;margin-top:auto;z-index:2}.sidebar-dropup-trigger,.sidebar-footer{display:flex;gap:var(--space-sidebar-footer-gap);position:relative}.sidebar-dropup-trigger{align-items:center;justify-content:space-between;width:100%;padding-block:var(--space-sidebar-trigger-padding-block);padding-inline-start:var(--space-sidebar-nav-padding-inline-start);padding-inline-end:var(--space-sidebar-nav-padding-inline-end);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);border:var(--border-width-hairline) solid transparent;background:none;color:var(--color-text);font-size:var(--font-size-sidebar-trigger);font-weight:600;cursor:pointer;box-sizing:border-box;flex-shrink:0;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:border-color .2s ease,color .2s ease,box-shadow .22s ease}.sidebar-dropup-trigger:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .22s ease;z-index:-1;filter:saturate(140%)}.sidebar-dropup-trigger:after,.sidebar-dropup-trigger:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none}.sidebar-dropup-trigger:after{background:linear-gradient(110deg,var(--color-sidebar-hover) 0,transparent 80%);opacity:.18;mix-blend-mode:screen;transition:opacity .2s ease;z-index:-2}.sidebar-dropup-trigger:focus-visible,.sidebar-dropup-trigger:hover{color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger:focus-visible:before,.sidebar-dropup-trigger:hover:before{opacity:1;transform:scale(1.02)}.sidebar-dropup-trigger:focus-visible:after,.sidebar-dropup-trigger:hover:after{opacity:.35}.sidebar-dropup-trigger:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger__glyph{width:var(--icon-size-md);height:var(--icon-size-md);opacity:.9}.sidebar-dropup-trigger__chevron{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .18s ease}.sidebar-dropup-trigger[aria-expanded=true] .sidebar-dropup-trigger__chevron,.sidebar-dropup-trigger__chevron.is-rotated{transform:rotate(180deg)}.sidebar-dropup-panel{position:absolute;left:0;right:0;bottom:calc(100% + var(--space-sidebar-popover-offset));border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-sidebar-border-strong);background:linear-gradient(160deg,color-mix(in srgb,var(--color-sidebar-surface) 88%,transparent) 0,color-mix(in srgb,var(--color-sidebar-surface-alt) 68%,transparent) 100%);box-shadow:inset 0 0 0 var(--border-width-fine) var(--color-sidebar-border),var(--shadow-sidebar-panel);padding:var(--space-sidebar-popover-padding-block) var(--space-sidebar-popover-padding-inline);color:var(--color-text-frosted);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--space-sm));transition:opacity .18s ease,transform .18s ease,visibility .18s ease,box-shadow .22s ease;backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));-webkit-backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));z-index:5;isolation:isolate}.sidebar-dropup-panel[data-state=expanded]{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.sidebar-dropup-panel__inner{display:flex;flex-direction:column;gap:var(--space-sidebar-popover-gap);width:100%;padding-inline-end:var(--space-sidebar-dropup-scroll-reserve);max-height:var(--sidebar-dropup-max-height);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable both-edges}.sidebar-dropup-panel__inner.is-measuring{position:absolute;width:-moz-max-content;width:max-content;max-width:none;visibility:hidden;pointer-events:none;left:var(--offscreen-offset);right:auto;top:auto;bottom:auto}.sidebar-dropup-measure{position:absolute;visibility:hidden;pointer-events:none;height:0;overflow:hidden}.sidebar-dropup-panel__inner>*{width:100%;min-width:0}#sidebar[data-footer-state=expanded] .sidebar-nav{opacity:0;pointer-events:none}#sidebar[data-footer-state=collapsed] .sidebar-nav{opacity:1}.sidebar-loading-wrapper{display:flex;justify-content:center;align-items:center;padding:var(--space-2xl) 0;width:100%;grid-column:1/-1}.sidebar-loading-indicator{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-muted-strong);font-size:var(--font-size-sm);font-weight:500;letter-spacing:.01em}.sidebar-loading-text{white-space:nowrap}#app{box-sizing:border-box;transition:margin-left .2s ease,width .2s ease,max-width .2s ease}#app[data-sidebar-state=collapsed]{margin-left:calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap))}#app[data-sidebar-state=expanded]{margin-left:calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap))}#sidebar.sidebar-collapsed .sidebar-nav-link,body.sidebar-collapsed #sidebar .sidebar-nav-link{justify-content:center;width:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full);--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-scale:1}#sidebar.sidebar-expanded .sidebar-nav-link,body.sidebar-expanded #sidebar .sidebar-nav-link{justify-content:flex-start}#sidebar.sidebar-collapsed .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-text{display:none}#sidebar.sidebar-collapsed .sidebar__inner,body.sidebar-collapsed #sidebar .sidebar__inner{padding-inline:var(--space-2xs)}#sidebar.sidebar-collapsed .sidebar-panel,body.sidebar-collapsed #sidebar .sidebar-panel{padding-inline:calc(var(--space-3xs)*3)}#sidebar.sidebar-collapsed .sidebar-panel__header,body.sidebar-collapsed #sidebar .sidebar-panel__header{justify-content:center}#sidebar.sidebar-collapsed .sidebar-collapse-toggle,body.sidebar-collapsed #sidebar .sidebar-collapse-toggle{margin-inline:auto}#sidebar .sidebar-toggle-icon--rotated{transform:rotate(180deg)}#sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated,body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated{transform:rotate(0deg)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger{justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron{display:none}#sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph{margin:0}#sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible,#sidebar.sidebar-collapsed .sidebar-nav-link:hover,body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,body.sidebar-collapsed #sidebar .sidebar-nav-link:hover{--sidebar-nav-translate-x:0}@media (min-width:768px){#sidebar{transform:translateX(0)!important;width:var(--sidebar-width);overflow:visible}#app[data-sidebar-state=collapsed]{margin-left:calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap))}#app[data-sidebar-state=expanded]{margin-left:max(calc(var(--sidebar-width-expanded-base) + var(--sidebar-content-gap)),calc(var(--sidebar-dropup-content-width) + var(--sidebar-content-gap)));width:min(calc(100vw - var(--sidebar-width-expanded-base) - var(--sidebar-content-gap)),calc(100vw - var(--sidebar-dropup-content-width) - var(--sidebar-content-gap)));max-width:min(calc(100vw - var(--sidebar-width-expanded-base) - var(--sidebar-content-gap)),calc(100vw - var(--sidebar-dropup-content-width) - var(--sidebar-content-gap)))}}@keyframes card-motion-enter{0%{opacity:0;transform:translateY(var(--motion-card-enter-translate))}to{opacity:1;transform:translateY(0)}}@keyframes video-thumbnail-fade-in{0%{opacity:0}to{opacity:1}}@keyframes interface-fade-in{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--motion-fade-in-translate))}to{opacity:1;transform:translateY(0)}}.status-line{margin-top:.25rem;margin-bottom:.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);line-height:1.375;color:var(--text-primary)}.status-line.error{color:var(--color-critical-strong)}.status-line.\!error{color:var(--color-critical-strong)!important}.status-line.warn{color:var(--color-warning-strong)}@keyframes ztr-rotate{to{transform:rotate(1turn)}}@keyframes ztr-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes svelte-181fgen-loader-animation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes svelte-181fgen-fade-in{to{opacity:1}}.dm-app-shell{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-lg);background:var(--surface-base);color:var(--text-primary);min-height:100vh}.profile-modal .dm-app-shell{min-height:0;height:auto;padding:0;gap:var(--space-md)}.dm-app-shell__main,.dm-app-shell__sidebar{border-radius:var(--radius-lg);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-panel);box-shadow:var(--shadow-soft)}.profile-modal .dm-app-shell__main,.profile-modal .dm-app-shell__sidebar{height:auto;min-height:0;border:none;box-shadow:none;background:transparent;padding:0}.dm-app-shell__sidebar{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md)}.dm-app-shell__title{font-size:var(--font-size-lg);margin:0}.dm-app-shell__main{flex:1;display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md);background:var(--surface-raised)}.profile-modal .dm-app-shell__main,.profile-modal .dm-app-shell__sidebar{min-width:0}.dm-conversation-list{display:flex;flex-direction:column;gap:var(--space-sm)}.dm-conversation-list__header{display:flex;justify-content:space-between;align-items:center}.dm-conversation-list__items{display:flex;flex-direction:column;gap:var(--space-xs);overflow-y:auto;max-height:60vh;padding-right:var(--space-xs)}.dm-conversation-list__state{font-size:var(--font-size-sm);color:var(--text-muted);padding:var(--space-md);text-align:center;background:var(--surface-sunken);border-radius:var(--radius-md)}.dm-contact-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--border-subtle);background:transparent;color:inherit;text-align:left;cursor:pointer}.dm-contact-row:focus-visible,.dm-contact-row:hover{background:var(--surface-muted);border-color:var(--border-strong);outline:none}.dm-contact-row--active{background:var(--surface-sunken);border-color:var(--border-strong)}.dm-contact-row__content{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1}.dm-contact-row__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-xs)}.dm-contact-row__meta{display:inline-flex;align-items:center;gap:var(--space-xs)}.dm-contact-row__name{font-weight:600}.dm-contact-row__badge{align-self:flex-start;padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-white);font-size:var(--font-size-3xs)}.dm-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--text-muted);font-weight:600;overflow:hidden;border:var(--border-width-hairline) solid var(--border-subtle)}.dm-avatar--md{width:var(--space-xl-plus);height:var(--space-xl-plus);min-width:var(--space-xl-plus);min-height:var(--space-xl-plus)}.dm-avatar--sm{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}.dm-avatar__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.dm-message-thread{display:flex;flex-direction:column;gap:var(--space-sm);flex:1;min-height:0}.dm-message-thread__header{display:flex;align-items:baseline;gap:var(--space-sm)}.dm-message-thread__title{font-size:var(--font-size-base);margin:0}.dm-message-thread__status{font-size:var(--font-size-xs);color:var(--text-muted)}.dm-message-thread__zap-summary{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--border-subtle);background:var(--surface-sunken);color:var(--text-muted);font-size:var(--font-size-2xs)}.dm-message-thread__zap-label{text-transform:uppercase;letter-spacing:var(--tracking-wide)}.dm-message-thread__zap-total{font-weight:600;color:var(--text-primary)}.dm-message-thread__zap-profile{color:var(--text-muted)}.dm-message-thread__timeline{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);background:var(--surface-panel);border:var(--border-width-hairline) solid var(--border-subtle);overflow-y:auto;min-height:var(--size-16rem)}.dm-message-thread__state{padding:var(--space-md);text-align:center;color:var(--text-muted);background:var(--surface-sunken);border-radius:var(--radius-md)}.dm-message-row{display:flex;align-items:flex-end;gap:var(--space-xs);width:100%}.dm-message-avatar{width:var(--space-xl);height:var(--space-xl);flex-shrink:0;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover;background-color:var(--surface-sunken);border:var(--border-width-hairline) solid var(--border-subtle)}.dm-message-bubble{max-width:75%;display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);border:var(--border-width-hairline) solid var(--message-bubble-border);background:var(--message-bubble-background);color:var(--message-bubble-text)}.dm-message-bubble--outgoing .dm-message-bubble__meta,.dm-message-bubble--outgoing .dm-message-bubble__status{color:var(--color-white);opacity:.9}.dm-message-bubble__content{font-size:var(--font-size-sm);overflow-wrap:anywhere;white-space:pre-wrap}.dm-message-bubble__meta{display:flex;gap:var(--space-xs);font-size:var(--font-size-2xs);color:var(--message-bubble-meta)}.dm-message-bubble__status{color:var(--text-muted)}.dm-message-bubble__status[data-status=pending]{color:var(--status-warning)}.dm-message-bubble__status[data-status=sending]{color:var(--status-info)}.dm-message-bubble__status[data-status=failed]{color:var(--status-danger)}.dm-message-thread__new{align-self:center;border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--border-subtle);padding:var(--space-2xs) var(--space-sm);font-size:var(--font-size-2xs);background:var(--surface-sunken);color:var(--text-muted)}.dm-message-thread__new:focus-visible,.dm-message-thread__new:hover{background:var(--surface-overlay-panel-soft);color:var(--text-primary);outline:none}.dm-day-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-xs);color:var(--text-muted);font-size:var(--font-size-2xs)}.dm-day-divider__line{height:var(--border-width-hairline);background:var(--border-subtle)}.dm-notification-center{display:flex;flex-direction:column;gap:var(--space-sm)}.dm-notification-center__filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}.dm-notification-center__filter-button{border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--border-subtle);background:var(--surface-sunken);padding:var(--space-2xs) var(--space-sm);font-size:var(--font-size-2xs);font-weight:600;color:var(--text-muted);transition:color var(--motion-duration-fast) var(--motion-ease-out),background var(--motion-duration-fast) var(--motion-ease-out),border-color var(--motion-duration-fast) var(--motion-ease-out)}.dm-notification-center__filter-button:focus-visible,.dm-notification-center__filter-button:hover{outline:none;border-color:var(--border-strong);background:var(--surface-raised);color:var(--text-primary)}.dm-notification-center__filter-button--active{border-color:var(--border-strong);background:var(--surface-overlay-panel);color:var(--text-primary)}.dm-notification-center__groups{display:flex;flex-direction:column;gap:var(--space-md)}.dm-notification-center__group{display:flex;flex-direction:column;gap:var(--space-xs)}.dm-notification-center__group-title{font-size:var(--font-size-2xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.dm-notification-center__list{display:flex;flex-direction:column;gap:var(--space-xs)}.dm-notification-center__empty{font-size:var(--font-size-xs);color:var(--text-muted)}.dm-notification-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--border-subtle);background:var(--surface-sunken);font-size:var(--font-size-xs);text-align:left;transition:border-color var(--motion-duration-fast) var(--motion-ease-out),background var(--motion-duration-fast) var(--motion-ease-out)}.dm-notification-item:focus-visible,.dm-notification-item:hover{outline:none;border-color:var(--border-strong);background:var(--surface-raised)}.dm-notification-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size-md);height:var(--icon-size-md);border-radius:var(--radius-full);background:var(--surface-overlay-panel-soft);color:var(--text-muted);font-size:var(--font-size-xs)}.dm-notification-item__body{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}.dm-notification-item__title{font-weight:600;color:var(--text-primary)}.dm-notification-item__message{color:var(--text-muted)}.dm-notification-item__meta{display:flex;align-items:center;gap:var(--space-2xs);color:var(--text-muted)}.dm-notification-item__timestamp{font-variant-numeric:tabular-nums;white-space:nowrap}.dm-composer{display:flex;flex-direction:column;gap:var(--space-xs)}.dm-composer__label{font-size:var(--font-size-xs);color:var(--text-muted)}.dm-composer__input{resize:vertical;border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-base);color:var(--text-primary);padding:var(--space-sm);font-family:inherit}.dm-composer__input:focus-visible{outline:var(--space-3xs) solid var(--color-accent);outline-offset:var(--space-3xs)}.dm-composer__actions{justify-content:space-between}.dm-composer__actions,.dm-composer__tools{display:flex;align-items:center;gap:var(--space-sm)}.dm-composer__tools{flex-wrap:wrap;position:relative}.dm-composer__attach,.dm-composer__hint,.dm-composer__more-btn{font-size:var(--font-size-2xs);color:var(--text-muted)}.dm-composer__attach,.dm-composer__more-btn{border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-base);padding:var(--space-2xs) var(--space-sm);cursor:pointer}.dm-composer__more-btn{font-weight:700;line-height:1;min-width:var(--space-xl)}.dm-composer__more-menu{position:absolute;bottom:100%;left:0;margin-bottom:var(--space-xs);background:var(--surface-overlay-panel);border:var(--border-width-hairline) solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);z-index:10;display:flex;flex-direction:column;min-width:var(--size-8rem);padding:var(--space-xs)}.dm-composer__menu-item{text-align:left;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:background var(--motion-duration-fast) ease-out}.dm-composer__menu-item:focus-visible,.dm-composer__menu-item:hover{background:var(--surface-overlay-panel-soft);color:var(--text-primary);outline:none}.dm-composer__menu-item[aria-pressed=true]{background:var(--color-accent);color:var(--color-white)}.dm-composer__attach:focus-visible,.dm-composer__attach:hover,.dm-composer__more-btn:focus-visible,.dm-composer__more-btn:hover{background:var(--surface-overlay-panel-soft);color:var(--text-primary);outline:none}.dm-composer__send{border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--border-strong);background:var(--surface-overlay-panel);color:var(--text-primary);padding:var(--space-xs) var(--space-md);font-weight:600;cursor:pointer}.dm-composer__send:focus-visible,.dm-composer__send:hover{background:var(--surface-overlay-panel-soft);outline:none}.dm-composer__status{font-size:var(--font-size-2xs);color:var(--status-danger);min-height:var(--space-md)}@media (max-width:calc(768px - 0.02px)){.dm-app-shell[data-dm-view=list] .dm-app-shell__main,.dm-app-shell[data-dm-view=thread] .dm-app-shell__sidebar{display:none!important}.dm-message-thread__back{display:inline-flex;align-items:center;gap:.5rem}}@media (min-width:768px){.dm-app-shell{flex-direction:row;align-items:stretch}.dm-app-shell__sidebar{flex:0 0 var(--size-18rem);max-width:var(--size-20rem)}.dm-app-shell__main,.dm-app-shell__sidebar{height:calc(100vh - var(--space-lg)*2);display:flex!important}.dm-conversation-list__items{max-height:none;flex:1}.dm-message-thread__back{display:none!important}}#profilePaneMessages{height:100%;min-height:0}@media (min-width:768px){.profile-modal .dm-app-shell{flex-direction:row;align-items:stretch;height:100%;min-height:0}.profile-modal .dm-app-shell__sidebar{flex:0 0 var(--size-18rem);max-width:var(--size-20rem);height:100%;overflow:hidden;display:flex;flex-direction:column}.profile-modal .dm-app-shell__main{flex:1 1 auto;height:100%;overflow:hidden;display:flex;flex-direction:column}.profile-modal .dm-conversation-list{flex:1;min-height:0;display:flex;flex-direction:column}.profile-modal .dm-conversation-list__items{flex:1;overflow-y:auto;min-height:0;overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none}.profile-modal .dm-conversation-list__items::-webkit-scrollbar{display:none}.profile-modal .dm-message-thread{flex:1;min-height:0;display:flex;flex-direction:column}.profile-modal .dm-message-thread__timeline{flex:1;overflow-y:auto;min-height:0;overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none}.profile-modal .dm-message-thread__timeline::-webkit-scrollbar{display:none}}@media (min-width:1024px){.dm-app-shell__sidebar{flex-basis:var(--size-20rem)}.dm-message-thread__timeline{padding:var(--space-md)}}.marquee-host{position:relative;overflow:hidden;white-space:nowrap;width:100%;min-width:0;max-width:100%}.marquee-static{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1}.marquee-anim,.marquee-static{transition:opacity .3s ease}.marquee-anim{position:absolute;inset:0;display:flex;align-items:center;opacity:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.marquee-track{display:flex;width:-moz-max-content;width:max-content;animation:marquee-scroll linear infinite;animation-duration:var(--marquee-duration,10s);animation-play-state:paused}.marquee-item{flex-shrink:0;padding-right:var(--space-xl)}@keyframes marquee-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@media (min-width:1024px){.card:hover .marquee-host.can-marquee .marquee-static{opacity:0}.card:hover .marquee-host.can-marquee .marquee-anim{opacity:1}.card:hover .marquee-host.can-marquee .marquee-track{animation-play-state:running}.\!card:hover .marquee-host.can-marquee .marquee-static{opacity:0!important}.\!card:hover .marquee-host.can-marquee .marquee-anim{opacity:1!important}.\!card:hover .marquee-host.can-marquee .marquee-track{animation-play-state:running!important}}@media (max-width:calc(1024px - var(--breakpoint-edge-offset ))){.card[data-mobile-active=true]{--video-card-lift-translate-y:var(--motion-video-card-hover-translate);--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ );--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card[data-mobile-active=true] .video-card__title{color:var(--color-accent)}.card[data-mobile-active=true] .marquee-host.can-marquee .marquee-static{opacity:0}.card[data-mobile-active=true] .marquee-host.can-marquee .marquee-anim{opacity:1}.card[data-mobile-active=true] .marquee-host.can-marquee .marquee-track{animation-play-state:running}.\!card[data-mobile-active=true]{--video-card-lift-translate-y:var(--motion-video-card-hover-translate)!important;--video-card-backdrop-opacity:0.425!important;--video-card-backdrop-translate-y:var(
+ --motion-video-card-backdrop-translate
+ )!important;--video-card-backdrop-scale:1.12!important;--video-card-backdrop-blur:var(--blur-video-card-backdrop-strong)!important;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-mobile-active=true] .video-card__title{color:var(--color-accent)!important}.\!card[data-mobile-active=true] .marquee-host.can-marquee .marquee-static{opacity:0!important}.\!card[data-mobile-active=true] .marquee-host.can-marquee .marquee-anim{opacity:1!important}.\!card[data-mobile-active=true] .marquee-host.can-marquee .marquee-track{animation-play-state:running!important}}.bv-logo__accent{fill:var(--bitvid-accent,var(--logo-accent-color))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-16{bottom:4rem}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.left-1\/2{left:50%}.left-4{left:1rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-12{top:3rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-overlay-floating{z-index:var(--z-overlay-floating)}.z-overlay-toast{z-index:var(--z-overlay-toast)}.order-1{order:1}.order-2{order:2}.col-span-full{grid-column:1/-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-ml-1{margin-left:-.25rem}.-ml-2{margin-left:-.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.ml-md{margin-left:var(--space-md)}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.mt-sm{margin-top:var(--space-sm)}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-2xl{height:var(--space-2xl)}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.max-h-modal-body{max-height:var(--modal-body-max-height)}.max-h-modal-pane{max-height:var(--modal-pane-max-height)}.max-h-modal-sheet{max-height:var(--modal-sheet-max-height)}.max-h-modal-shell{max-height:var(--modal-shell-max-height)}.min-h-0{min-height:0}.min-h-\[200px\]{min-height:200px}.min-h-\[var\(--size-80px\)\]{min-height:var(--size-80px)}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-\[200px\]{max-width:200px}.max-w-docs{max-width:var(--layout-docs-max-width)}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-popover-safe{max-width:var(--popover-inline-safe-max)}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-90{--tw-rotate:90deg}.rotate-90,.scale-\[1\.2\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\.2\]{--tw-scale-x:1.2;--tw-scale-y:1.2}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-y{resize:vertical}.resize{resize:both}.list-disc{list-style-type:disc}.auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-lg{gap:var(--space-lg)}.gap-sm{gap:var(--space-sm)}.gap-xl{gap:var(--space-xl)}.gap-xs{gap:var(--space-xs)}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-y-1{row-gap:.25rem}.gap-y-6{row-gap:1.5rem}.gap-y-8{row-gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-border-translucent>:not([hidden])~:not([hidden]){border-color:var(--border-overlay)}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-border{border-color:var(--border-default)}.border-border-strong{border-color:var(--border-strong)}.border-border-subtle{border-color:var(--border-subtle)}.border-border-translucent{border-color:var(--border-overlay)}.border-border-translucent-bright{border-color:var(--color-border-translucent-bright)}.border-border-translucent-medium{border-color:var(--color-border-translucent-medium)}.border-overlay{border-color:var(--border-overlay)}.border-overlay-strong{border-color:var(--border-overlay-strong)}.border-status-danger-border{border-color:var(--status-danger-border)}.border-status-info{border-color:var(--status-info)}.border-status-info-border{border-color:var(--status-info-border)}.border-status-success-border{border-color:var(--status-success-border)}.border-status-warning-border{border-color:var(--status-warning-border)}.border-surface-strong{border-color:var(--border-strong)}.border-opacity-20{--tw-border-opacity:0.2}.border-opacity-40{--tw-border-opacity:0.4}.bg-accent-strong{background-color:var(--color-accent-strong)}.bg-overlay-muted{background-color:var(--surface-overlay-muted)}.bg-overlay-panel{background-color:var(--surface-overlay-panel)}.bg-overlay-panel-soft{background-color:var(--surface-overlay-panel-soft)}.bg-overlay-strong{background-color:var(--surface-overlay-strong)}.bg-panel{background-color:var(--surface-panel)}.bg-status-danger-surface{background-color:var(--status-danger-surface)}.bg-status-info-surface{background-color:var(--status-info-surface)}.bg-status-success-surface{background-color:var(--status-success-surface)}.bg-status-warning-surface{background-color:var(--status-warning-surface)}.bg-surface{background-color:var(--surface-base)}.bg-surface-alt{background-color:var(--surface-alt)}.bg-surface-muted{background-color:var(--surface-muted)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-opacity-95{--tw-bg-opacity:0.95}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-overlay-channel{background-image:var(--surface-overlay-banner-gradient-channel)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.stroke-border-translucent{stroke:var(--border-overlay)}.stroke-current{stroke:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-lg{padding:var(--space-lg)}.p-md{padding:var(--space-md)}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-2{padding-left:.5rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pl-md{padding-left:var(--space-md)}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-2xs{font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-3xs{font-size:var(--font-size-3xs);line-height:var(--line-height-tight)}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[0\.75rem\]{font-size:.75rem}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.ordinal{--tw-ordinal:ordinal}.ordinal,.tabular-nums{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tabular-nums{--tw-numeric-spacing:tabular-nums}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-extra-wide{letter-spacing:var(--tracking-extra-wide)}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-accent{color:var(--color-accent)}.text-black{color:var(--color-black)}.text-critical{color:var(--color-critical)}.text-critical-strong{color:var(--color-critical-strong)}.text-info{color:var(--color-info)}.text-info-strong{color:var(--color-info-strong)}.text-muted{color:var(--text-muted)}.text-muted-strong{color:var(--text-muted-strong)}.text-primary{color:var(--text-primary)}.text-status-danger{color:var(--status-danger)}.text-status-danger-on{color:var(--status-danger-on)}.text-status-info{color:var(--status-info)}.text-status-info-on{color:var(--status-info-on)}.text-status-neutral{color:var(--status-neutral)}.text-status-private-on{color:var(--status-private-on)}.text-status-success{color:var(--status-success)}.text-status-success-on{color:var(--status-success-on)}.text-status-warning{color:var(--status-warning)}.text-status-warning-on{color:var(--status-warning-on)}.text-subtle{color:var(--text-subtle)}.text-text{color:var(--text-primary)}.text-text-frosted{color:var(--text-frosted-primary)}.text-text-muted{color:var(--text-muted)}.text-text-strong{color:var(--color-text-strong)}.text-warning{color:var(--status-warning)}.text-warning-strong{color:var(--status-warning-strong)}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-95{opacity:.95}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-inner,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.blur-xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-xl{--tw-blur:blur(24px)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-fast{transition-duration:var(--motion-duration-fast)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (max-width:640px){.bv-grid-video{gap:var(--space-md);grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){:root{--motion-duration-fast:0s;--motion-duration-base:0s;--motion-duration-slow:0s;--modal-motion-duration:0s}*,:after,:before{animation-delay:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;animation-timing-function:linear!important;transition-delay:0s!important;transition-duration:0s!important;transition-timing-function:linear!important}.player-modal__similar-card:before{transition:none!important}#app,#playerModal .player-modal__content,#sidebar,.btn,.btn-ghost,.card,.card[data-motion=enter],.fade-in,.icon-button,.menu__item,.modal-nav,.notification-banner,.notification-portal,.popover-panel,.popover__panel,.progress-bar-fill,.sidebar-collapse-toggle,.sidebar-collapse-toggle__icon,.sidebar-dropup-panel,.sidebar-dropup-trigger,.sidebar-dropup-trigger__chevron,.sidebar-loading-indicator,.sidebar-loading-wrapper,.sidebar-nav,.sidebar-nav-link,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast,.video-modal__panel,.watch-history-card,.watch-history-card__action,.watch-history-card__creatorAvatar,.watch-history-card__creatorName,.watch-history-card__title{transition-property:none!important}.popover-panel,.popover__panel{transform:none!important}.popover-panel[data-state=open],.popover__panel[data-state=open]{opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{opacity:0}.card[data-motion=enter],.fade-in,[data-video-thumbnail][data-thumbnail-loaded=true]{opacity:1;animation:none!important}.notification-banner,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast{animation:none!important}.notification-portal{transform:none!important;opacity:1!important}}#profileModal{padding:0;width:100vw;height:100vh;max-width:none;max-height:none}#profileModal .bv-modal__panel{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;border:none}@media (min-width:1024px){#profileModal .profile-modal{max-block-size:none}}.no-scrollbar{scrollbar-width:none!important;-ms-overflow-style:none!important}.no-scrollbar::-webkit-scrollbar{display:none!important}@media (min-width:768px){.md\:hidden .bv-modal,.md\:hidden.profile-pane{display:none!important}}@media (min-width:1024px){.lg\:hidden .bv-modal,.lg\:hidden.profile-pane{display:none!important}}.placeholder\:text-muted::-moz-placeholder{color:var(--text-muted)}.placeholder\:text-muted::placeholder{color:var(--text-muted)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-status-danger-border:hover{border-color:var(--status-danger-border)}.hover\:bg-overlay-panel:hover{background-color:var(--surface-overlay-panel)}.hover\:bg-panel-hover:hover{background-color:var(--surface-panel-hover)}.hover\:text-accent:hover{color:var(--color-accent)}.hover\:text-accent-strong:hover{color:var(--color-accent-strong)}.hover\:text-critical:hover{color:var(--color-critical)}.hover\:text-info-strong:hover{color:var(--color-info-strong)}.hover\:text-status-danger-strong:hover{color:var(--status-danger-strong)}.hover\:text-text:hover{color:var(--text-primary)}.hover\:text-text-strong:hover{color:var(--color-text-strong)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-sm:hover{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-accent:focus{--tw-ring-color:var(--color-accent)}.focus\:ring-info:focus{--tw-ring-color:var(--color-info)}.focus\:ring-status-info:focus{--tw-ring-color:var(--status-info)}.focus\:ring-status-success:focus{--tw-ring-color:var(--status-success)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-surface:focus{--tw-ring-offset-color:var(--surface-base)}.focus-visible\:bg-primary:focus-visible{background-color:var(--color-primary)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-info:focus-visible{outline-color:var(--color-info)}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-primary{color:var(--text-primary)}.group:hover .group-hover\:opacity-100{opacity:1}@media not all and (min-width:640px){.max-sm\:h-12{height:3rem}.max-sm\:w-12{width:3rem}.max-sm\:text-2xs{font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.max-sm\:text-base{font-size:var(--font-size-base);line-height:var(--line-height-base)}}@media (min-width:640px){.sm\:order-1{order:1}.sm\:order-2{order:2}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:flex{display:flex}.sm\:w-1\/3{width:33.333333%}.sm\:w-32{width:8rem}.sm\:w-48{width:12rem}.sm\:w-auto{width:auto}.sm\:max-w-xs{max-width:20rem}.sm\:flex-none{flex:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:.5rem}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.sm\:self-end{align-self:flex-end}.sm\:p-0{padding:0}.sm\:p-4{padding:1rem}.sm\:p-5{padding:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:pt-8{padding-top:2rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-end{justify-content:flex-end}.md\:gap-md{gap:var(--space-md)}.md\:pb-12{padding-bottom:3rem}}@media (min-width:1024px){.lg\:ml-auto{margin-left:auto}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-auto{height:auto}.lg\:max-h-modal-shell{max-height:var(--modal-shell-max-height)}.lg\:w-64{width:16rem}.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-5xl{max-width:64rem}.lg\:shrink-0{flex-shrink:0}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-wrap{flex-wrap:wrap}.lg\:items-start{align-items:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:rounded-modal-xl{border-radius:var(--radius-modal-xl)}.lg\:border{border-width:1px}.lg\:p-8{padding:2rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-right{text-align:right}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
\ No newline at end of file
diff --git a/dist/css/tailwind.source.css b/dist/css/tailwind.source.css
new file mode 100644
index 00000000..c87b810f
--- /dev/null
+++ b/dist/css/tailwind.source.css
@@ -0,0 +1,6096 @@
+@import "./tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ font-size: 80%;
+ }
+
+ @media (min-width: theme("screens.md")) {
+ html {
+ font-size: 100%;
+ }
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ html {
+ font-size: 75%;
+ }
+ }
+
+ *,
+ *::before,
+ *::after {
+ scrollbar-width: thin;
+ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+ }
+
+ *::-webkit-scrollbar {
+ width: var(--scrollbar-width);
+ height: var(--scrollbar-width);
+ }
+
+ *::-webkit-scrollbar-track {
+ background: var(--scrollbar-track);
+ }
+
+ *::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb);
+ border-radius: var(--radius-sm);
+ }
+
+ *::-webkit-scrollbar-thumb:hover {
+ background: var(--scrollbar-thumb-hover);
+ }
+
+ body {
+ --app-header-centerline: calc(
+ env(safe-area-inset-top, 0) + var(--app-header-centerline-offset)
+ );
+ font-family: var(--font-family-sans);
+ background-color: var(--color-page);
+ color: var(--color-text-strong);
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ }
+
+ :root[data-theme-accent="override"] {
+ --color-accent: var(--color-accent-override);
+ --color-accent-strong: var(--color-accent-strong-override);
+ --color-accent-pressed: var(--color-accent-pressed-override);
+ }
+
+ #uiOverlay {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: var(--z-overlay-popover);
+ }
+
+ #uiOverlay > * {
+ pointer-events: auto;
+ }
+
+ #nip71TagsFieldset > legend,
+ #editNip71TagsFieldset > legend {
+ margin-left: 0;
+ padding: 0;
+ }
+
+ #app {
+ background-color: var(--color-page);
+ color: inherit;
+ }
+
+ html.modal-open,
+ body.modal-open {
+ overflow: hidden;
+ height: 100%;
+ }
+
+ body.modal-open #app {
+ overflow: hidden;
+ }
+
+ body.modal-open #sidebar {
+ pointer-events: none;
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ body.modal-open #sidebar {
+ z-index: var(--z-sidebar-overlay);
+ }
+
+ #sidebar.is-modal-hidden {
+ pointer-events: none;
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ [ng\:cloak],
+ [ng-cloak],
+ [data-ng-cloak],
+ [x-ng-cloak],
+ .ng-cloak,
+ .x-ng-cloak,
+ .ng-hide:not(.ng-hide-animate) {
+ display: none !important;
+ }
+
+ ng\:form {
+ display: block;
+ }
+
+ .ng-animate-shim {
+ visibility: hidden;
+ }
+
+ .ng-anchor {
+ position: absolute;
+ }
+}
+
+@layer components {
+ .ds-header {
+ @apply flex items-center justify-start py-sm;
+ }
+
+ .app-shell__header {
+ position: sticky;
+ top: env(safe-area-inset-top, 0);
+ z-index: var(--z-app-header);
+ padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0));
+ padding-bottom: var(--space-sm);
+ background-color: transparent;
+ background-image: var(--surface-overlay-banner-gradient-header);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .ds-metric-probe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ visibility: hidden;
+ pointer-events: none;
+ contain: layout size style;
+ inline-size: 0;
+ block-size: var(--ds-metric-probe-length, 0);
+ overflow: hidden;
+ }
+
+ .ds-header__logo {
+ @apply h-2xl-plus w-auto max-w-none;
+ }
+
+ .focus-ring {
+ @apply outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
+ }
+
+ .focus-ring:focus-visible {
+ --tw-ring-color: var(--color-accent);
+ }
+
+ .author-pic {
+ @apply block h-full w-full rounded-full object-cover;
+ }
+
+ .header-icon-toggle {
+ @apply focus-ring inline-flex items-center justify-center rounded-full transition-colors duration-150 ease-out;
+ width: var(--icon-size-lg);
+ height: var(--icon-size-lg);
+ min-width: var(--icon-size-lg);
+ min-height: var(--icon-size-lg);
+ padding: 0;
+ border: none;
+ background: transparent;
+ color: var(--color-text-muted);
+ line-height: 1;
+ }
+
+ .header-icon-toggle[data-theme-state="light"] {
+ color: var(--color-text-strong);
+ }
+
+ .header-icon-toggle[data-theme-state="dark"] {
+ color: var(--color-text);
+ }
+
+ .header-icon-toggle__icon-wrapper {
+ @apply inline-flex items-center justify-center;
+ inline-size: var(--space-lg);
+ block-size: var(--space-lg);
+ }
+
+ .header-icon-toggle__icon {
+ inline-size: 100%;
+ block-size: 100%;
+ display: none;
+ fill: currentColor;
+ }
+
+ .header-icon-toggle__icon-wrapper:not([data-theme-icon-state]),
+ .header-icon-toggle__icon-wrapper[data-theme-icon-state="light"] {
+ color: inherit;
+ }
+
+ .header-icon-toggle__icon-wrapper[data-theme-icon-state="light"]
+ .header-icon-toggle__icon--dark {
+ display: block;
+ }
+
+ .header-icon-toggle__icon-wrapper[data-theme-icon-state="dark"]
+ .header-icon-toggle__icon--light {
+ display: block;
+ }
+
+ .header-icon-toggle__icon-wrapper:not([data-theme-icon-state])
+ .header-icon-toggle__icon--dark {
+ display: block;
+ }
+
+ #profileUnreadDot {
+ position: absolute;
+ top: var(--space-2xs);
+ right: var(--space-2xs);
+ width: var(--space-sm);
+ height: var(--space-sm);
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--color-page);
+ background-color: var(--status-danger);
+ display: none;
+ pointer-events: none;
+ }
+
+ #profileUnreadDot.is-visible {
+ display: block;
+ }
+
+ .header-icon-toggle[data-theme-state="light"]:hover,
+ .header-icon-toggle[data-theme-state="light"]:focus-visible {
+ color: var(--color-text);
+ }
+
+ .header-icon-toggle[data-theme-state="dark"]:hover,
+ .header-icon-toggle[data-theme-state="dark"]:focus-visible {
+ color: var(--color-text-strong);
+ }
+
+ .header-icon-toggle[aria-pressed="true"] {
+ color: var(--color-text-strong);
+ }
+
+ .header-icon-toggle[aria-pressed="true"]:hover,
+ .header-icon-toggle[aria-pressed="true"]:focus-visible {
+ color: var(--color-text-strong);
+ }
+
+ .header-search__region {
+ @apply hidden flex-1 justify-center md:flex;
+ min-width: 0;
+ padding-inline: clamp(var(--space-md), 4vw, var(--space-3xl));
+ }
+
+ .header-search {
+ @apply flex items-center gap-3 rounded-full border border-border border-opacity-40 bg-overlay-panel px-4 shadow-sm transition-colors duration-base ease-out;
+ backdrop-filter: blur(var(--popover-backdrop-blur));
+ -webkit-backdrop-filter: blur(var(--popover-backdrop-blur));
+ padding-block: calc(var(--space-sm) * 0.9);
+ inline-size: min(100%, var(--header-search-max-inline));
+ }
+
+ .header-search:focus-within {
+ @apply border-accent-strong;
+ }
+
+ .header-search__icon {
+ @apply block h-5 w-5;
+ background-color: currentColor;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ -webkit-mask-size: contain;
+ }
+
+ .header-search__icon--filter {
+ mask-image: url("../assets/svg/filter.svg");
+ -webkit-mask-image: url("../assets/svg/filter.svg");
+ }
+
+ .header-search__icon--submit {
+ mask-image: url("../assets/svg/search.svg");
+ -webkit-mask-image: url("../assets/svg/search.svg");
+ }
+
+ .header-search__filter {
+ @apply focus-ring inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-transparent transition-colors duration-base ease-out;
+ color: var(--color-accent);
+ inline-size: calc(var(--icon-size-lg) * 0.9);
+ block-size: calc(var(--icon-size-lg) * 0.9);
+ min-inline-size: calc(var(--icon-size-lg) * 0.9);
+ min-block-size: calc(var(--icon-size-lg) * 0.9);
+ }
+
+ .header-search__filter:hover,
+ .header-search__filter:focus-visible {
+ color: var(--color-accent-strong);
+ }
+
+ .header-search__input {
+ @apply flex-1 appearance-none bg-transparent text-sm text-text outline-none placeholder:text-muted;
+ min-width: 0;
+ }
+
+ .header-search__input:focus-visible {
+ @apply outline-none ring-0;
+ }
+
+ .header-search__submit {
+ @apply focus-ring inline-flex items-center justify-center rounded-full border border-transparent transition-colors duration-base ease-out;
+ background-color: var(--color-accent-strong);
+ color: var(--color-white);
+ inline-size: calc(var(--icon-size-lg) * 0.9);
+ block-size: calc(var(--icon-size-lg) * 0.9);
+ min-inline-size: calc(var(--icon-size-lg) * 0.9);
+ min-block-size: calc(var(--icon-size-lg) * 0.9);
+ padding: 0;
+ }
+
+ .header-search__submit:hover {
+ background-color: var(--color-accent);
+ }
+
+ .header-search__submit:focus-visible {
+ background-color: var(--color-accent-pressed);
+ }
+
+ .bv-logo {
+ --logo-wordmark-color: var(--color-logo-wordmark);
+ --logo-accent-color: var(--color-logo-accent);
+ --logo-background-color: var(--color-logo-background);
+ }
+
+ .bv-logo[data-variant="inverse"] {
+ --logo-wordmark-color: var(--color-logo-wordmark-inverse);
+ --logo-background-color: var(--color-logo-background-inverse);
+ }
+
+ .bv-logo[data-wordmark="current"] {
+ --logo-wordmark-color: currentColor;
+ }
+
+ .bv-logo[data-accent="current"] {
+ --logo-accent-color: currentColor;
+ }
+
+ .bv-logo[data-background="transparent"] {
+ --logo-background-color: transparent;
+ }
+
+ .bv-logo__wordmark {
+ fill: var(--logo-wordmark-color);
+ color: var(--logo-wordmark-color);
+ }
+
+ .bv-logo__accent {
+ fill: var(--logo-accent-color);
+ color: var(--logo-accent-color);
+ }
+
+ .bv-logo__background {
+ fill: var(--logo-background-color);
+ color: var(--logo-background-color);
+ }
+
+ .markdown-prose {
+ @apply prose max-w-none leading-relaxed text-text;
+ --tw-prose-body: var(--color-text);
+ --tw-prose-headings: var(--color-text-strong);
+ --tw-prose-invert-headings: var(--color-text-strong);
+ --tw-prose-lead: var(--color-text);
+ --tw-prose-links: var(--color-accent-strong);
+ --tw-prose-bold: var(--color-text-strong);
+ --tw-prose-counters: var(--color-text-muted);
+ --tw-prose-bullets: var(--color-text-muted);
+ --tw-prose-hr: var(--color-border-translucent-strong);
+ --tw-prose-quotes: var(--color-text-strong);
+ --tw-prose-quote-borders: var(--color-border-subtle);
+ --tw-prose-captions: var(--color-text-muted);
+ --tw-prose-code: var(--color-text-strong);
+ --tw-prose-pre-code: var(--color-text);
+ --tw-prose-pre-bg: var(--surface-muted);
+ --tw-prose-th-borders: var(--color-border);
+ --tw-prose-td-borders: var(--color-border-subtle);
+ }
+
+ .markdown-prose :where(h1, h2, h3, h4, h5, h6) {
+ color: var(--color-text-strong);
+ }
+
+ .markdown-prose :where(h1, h2, h3, h4, h5, h6) strong {
+ color: inherit;
+ }
+
+ .markdown-prose a {
+ color: var(--color-accent-strong);
+ text-decoration-color: color-mix(
+ in srgb,
+ var(--color-accent-strong) 65%,
+ transparent
+ );
+ text-decoration-thickness: var(--link-underline-thickness);
+ text-underline-offset: 0.2em;
+ }
+
+ .markdown-prose a:hover,
+ .markdown-prose a:focus-visible {
+ color: var(--color-accent);
+ text-decoration-line: underline;
+ }
+
+ .markdown-prose blockquote {
+ @apply rounded-md border-l-4 border-border-subtle bg-surface-muted bg-opacity-50 px-4 py-2 text-muted;
+ }
+
+ .markdown-prose :where(pre, code) {
+ @apply font-mono;
+ }
+
+ .markdown-prose code {
+ @apply rounded-md bg-surface-muted px-1 py-0.5 text-accent-strong;
+ }
+
+ .markdown-prose pre {
+ @apply overflow-x-auto rounded-lg border border-border-subtle bg-surface-muted p-4 text-text;
+ }
+
+ .markdown-prose pre code {
+ background-color: transparent;
+ color: inherit;
+ padding: 0;
+ }
+
+ .popover {
+ @apply relative inline-flex;
+ }
+
+ .popover-panel,
+ .popover__panel {
+ @apply focus-ring pointer-events-none z-overlay-popover min-w-menu max-w-popover-safe scale-95 rounded-overlay border border-border border-opacity-40 bg-overlay-panel px-overlay-panel-inline py-overlay-panel-block text-sm text-text opacity-0 shadow-overlay-panel transition-opacity transition-transform duration-base ease-out;
+ position: var(--popover-strategy, fixed);
+ left: var(--popover-left, 0);
+ top: var(--popover-top, 0);
+ max-width: var(--popover-max-width, none);
+ max-height: var(--popover-max-height, none);
+ }
+
+ .popover-panel[data-state="open"],
+ .popover__panel[data-state="open"] {
+ @apply pointer-events-auto scale-100 opacity-100;
+ }
+
+ .popover-panel[data-state="closed"],
+ .popover__panel[data-state="closed"] {
+ @apply pointer-events-none scale-95 opacity-0;
+ }
+
+ .search-filter-chip {
+ @apply inline-flex items-center gap-2 rounded-full border border-border-subtle bg-surface-alt px-3 py-1 text-xs font-medium text-text transition-colors duration-base ease-out;
+ }
+
+ .search-filter-chip[data-state="on"] {
+ @apply border-accent-strong bg-accent-strong text-white;
+ }
+
+ @media (min-width: theme("screens.md")) {
+ .search-filters-panel.is-advanced-open {
+ width: var(--size-40rem);
+ }
+ }
+
+ [data-popover-arrow="true"] {
+ left: var(--popover-arrow-left, auto);
+ right: var(--popover-arrow-right, auto);
+ top: var(--popover-arrow-top, auto);
+ bottom: var(--popover-arrow-bottom, auto);
+ }
+
+ .p-overlay-panel {
+ @apply px-overlay-panel-inline py-overlay-panel-block;
+ }
+
+ .ds-overlay-backdrop {
+ position: fixed;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--overlay-backdrop-color);
+ backdrop-filter: blur(var(--overlay-backdrop-blur));
+ -webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
+ }
+
+ .popover-panel[data-variant="zap"],
+ .popover__panel[data-variant="zap"] {
+ background: var(--color-overlay-veil);
+ color: var(--color-subtle);
+ border: var(--border-width-hairline) solid
+ var(--color-border-translucent-stronger);
+ box-shadow: var(--shadow-popover-zap);
+ backdrop-filter: blur(var(--popover-backdrop-blur));
+ -webkit-backdrop-filter: blur(var(--popover-backdrop-blur));
+ }
+
+ .btn {
+ @apply focus-ring inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-accent-strong px-5 py-2.5 text-base font-semibold text-white shadow-lg transition duration-base ease-in-out;
+ }
+
+ .btn[data-size="sm"],
+ .btn-ghost[data-size="sm"] {
+ @apply px-3 py-1.5 text-sm;
+ }
+
+ .btn[data-size="sm"],
+ .btn-ghost[data-size="sm"] {
+ @apply gap-1.5;
+ }
+
+ .btn:hover {
+ @apply bg-accent;
+ }
+
+ .btn:focus-visible {
+ @apply bg-accent-pressed;
+ }
+
+ .btn:disabled {
+ @apply pointer-events-none cursor-not-allowed opacity-60 shadow-none;
+ }
+
+ .btn-link {
+ @apply focus-ring inline-flex items-center gap-1 text-sm font-semibold text-accent transition duration-base ease-out;
+ }
+
+ .btn-link:hover,
+ .btn-link:focus-visible {
+ @apply text-accent-strong underline;
+ }
+
+ .progress,
+ [data-progress-meter] {
+ --progress-height: var(--progress-height-md);
+ --progress-track: var(--progress-track-color);
+ --progress-fill: var(--progress-fill-color);
+ --progress-radius-current: var(--progress-radius);
+ display: block;
+ width: 100%;
+ height: var(--progress-height);
+ border: none;
+ border-radius: var(--progress-radius-current);
+ overflow: hidden;
+ background-color: var(--progress-track);
+ appearance: none;
+ }
+
+ .progress::-webkit-progress-bar,
+ [data-progress-meter]::-webkit-progress-bar {
+ background-color: var(--progress-track);
+ border-radius: var(--progress-radius-current);
+ }
+
+ .progress::-webkit-progress-value,
+ [data-progress-meter]::-webkit-progress-value {
+ background-color: var(--progress-fill);
+ border-radius: var(--progress-radius-current);
+ transition: width var(--progress-transition-duration)
+ var(--progress-transition-ease);
+ }
+
+ .progress::-moz-progress-bar,
+ [data-progress-meter]::-moz-progress-bar {
+ background-color: var(--progress-fill);
+ border-radius: var(--progress-radius-current);
+ transition: width var(--progress-transition-duration)
+ var(--progress-transition-ease);
+ }
+
+ .progress[data-variant="surface"],
+ [data-progress-meter][data-variant="surface"],
+ .progress.progress--surface,
+ [data-progress-meter].progress--surface {
+ --progress-track: var(--color-panel);
+ }
+
+ .progress[data-variant="accent"],
+ [data-progress-meter][data-variant="accent"],
+ .progress.progress--accent,
+ [data-progress-meter].progress--accent {
+ --progress-fill: var(--color-info-strong);
+ }
+
+ .btn-ghost {
+ @apply btn border border-border border-opacity-60 bg-transparent text-text shadow-none;
+ }
+
+ .btn-ghost:hover {
+ @apply bg-panel-hover text-text;
+ }
+
+ .btn-ghost:focus-visible {
+ @apply bg-panel-hover;
+ }
+
+ .btn-ghost:disabled {
+ @apply pointer-events-none opacity-50 shadow-none;
+ }
+
+ .btn-ghost[data-variant="critical"] {
+ @apply border border-critical border-opacity-60 text-critical;
+ }
+
+ .btn-ghost[data-variant="critical"]:hover,
+ .btn-ghost[data-variant="critical"]:focus-visible {
+ @apply bg-critical bg-opacity-20 text-critical-strong;
+ }
+
+ .login-option {
+ @apply focus-ring relative flex h-full w-full flex-col gap-4 overflow-hidden border border-border bg-overlay-panel-soft px-6 py-5 text-left text-text shadow-lg transition duration-300 ease-out;
+ border-radius: calc(var(--radius-xl) * 1.12);
+ isolation: isolate;
+ backdrop-filter: blur(var(--blur-modal-backdrop));
+ background-image: linear-gradient(
+ 140deg,
+ color-mix(in srgb, var(--surface-overlay-panel-soft) 88%, transparent) 0%,
+ color-mix(in srgb, var(--surface-overlay-panel) 72%, transparent) 100%
+ );
+ transform: translate3d(0, 0, 0);
+ transition-property: border-color, box-shadow, transform;
+ }
+
+ .login-option::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ border-radius: inherit;
+ opacity: 0;
+ transform: translate3d(0, 14%, 0);
+ transition:
+ opacity 220ms ease,
+ transform 220ms ease;
+ background: radial-gradient(
+ 115% 115% at 0% 0%,
+ color-mix(in srgb, var(--status-neutral) 32%, transparent) 0%,
+ transparent 65%
+ );
+ }
+
+ .login-option:hover,
+ .login-option:focus-visible {
+ @apply border-border-strong;
+ box-shadow: var(--shadow-modal);
+ transform: translate3d(0, var(--motion-login-option-hover-translate), 0);
+ }
+
+ .login-option:hover::after,
+ .login-option:focus-visible::after {
+ opacity: 0.65;
+ transform: translate3d(0, 0, 0);
+ }
+
+ .login-option:disabled,
+ .login-option[aria-disabled="true"] {
+ @apply cursor-not-allowed opacity-60 shadow-none;
+ transform: none;
+ }
+
+ .login-option[data-tone="accent"]::after {
+ background: radial-gradient(
+ 120% 120% at 0% 0%,
+ color-mix(in srgb, var(--status-info) 38%, transparent) 0%,
+ transparent 65%
+ );
+ }
+
+ .login-option[data-tone="warning"]::after {
+ background: radial-gradient(
+ 120% 120% at 0% 0%,
+ color-mix(in srgb, var(--status-warning) 42%, transparent) 0%,
+ transparent 65%
+ );
+ }
+
+ .login-option--primary {
+ @apply border-border;
+ }
+
+ .login-option--ghost {
+ background-image: linear-gradient(
+ 145deg,
+ color-mix(in srgb, var(--surface-overlay-panel-soft) 82%, transparent) 0%,
+ color-mix(in srgb, var(--surface-overlay-panel-soft) 68%, transparent)
+ 100%
+ );
+ }
+
+ .login-option--outline {
+ @apply border-border-strong;
+ }
+
+ .login-option--link {
+ @apply border border-transparent bg-transparent text-accent shadow-none;
+ }
+
+ .login-option__header,
+ .login-option__copy,
+ .login-option__status,
+ .login-option__capabilities {
+ position: relative;
+ z-index: 1;
+ }
+
+ .login-option__header {
+ @apply flex w-full items-start justify-between gap-4;
+ }
+
+ .login-option__copy {
+ @apply flex min-w-0 flex-col items-start gap-2;
+ }
+
+ .login-option__eyebrow {
+ @apply text-[length:var(--font-size-2xs)] font-semibold uppercase text-text-muted;
+ letter-spacing: 0.18em;
+ }
+
+ .login-option:hover .login-option__eyebrow,
+ .login-option:focus-visible .login-option__eyebrow {
+ @apply text-text;
+ }
+
+ .login-option__label {
+ @apply text-lg font-semibold text-text;
+ }
+
+ .login-option__description {
+ @apply text-sm leading-relaxed text-text-muted;
+ }
+
+ .login-option__chevron {
+ @apply inline-flex h-9 w-9 items-center justify-center rounded-full bg-overlay-panel text-text-muted transition duration-200 ease-out;
+ box-shadow: inset 0 0 0 var(--border-width-hairline)
+ color-mix(in srgb, var(--border-overlay) 60%, transparent);
+ }
+
+ .login-option:hover .login-option__chevron,
+ .login-option:focus-visible .login-option__chevron {
+ @apply bg-accent text-white;
+ box-shadow: none;
+ }
+
+ .login-option__status {
+ @apply flex w-full items-center justify-between gap-2 text-sm text-text-muted;
+ }
+
+ .login-option__capabilities {
+ @apply flex flex-wrap gap-2;
+ position: relative;
+ }
+
+ .btn-ghost[data-state="active"],
+ .btn-ghost[aria-pressed="true"] {
+ @apply border-transparent bg-primary text-white shadow-md;
+ }
+
+ .btn-ghost[data-state="active"]:hover,
+ .btn-ghost[data-state="active"]:focus-visible,
+ .btn-ghost[aria-pressed="true"]:hover,
+ .btn-ghost[aria-pressed="true"]:focus-visible {
+ @apply bg-accent-strong;
+ }
+
+ .modal-progress {
+ width: var(--progress-width, 0%);
+ transition: width var(--motion-duration-base, 160ms)
+ var(--motion-ease-out, ease-out);
+ }
+
+ .cloudflare-progress__fill {
+ width: var(--cloudflare-progress-width, 0%);
+ transition: width var(--motion-duration-base, 160ms)
+ var(--motion-ease-out, ease-out);
+ }
+
+ /*
+ * Blog embed heights are now driven by the iframe content via postMessage.
+ * Styling lives inline so the shell can expand naturally with its card.
+ */
+
+ /*
+ * Blog carousel component styles
+ * Tokens consumed here are defined in css/tokens.css under the
+ * "Blog carousel tokens" section:
+ */
+
+ .badge {
+ @apply inline-flex items-center gap-1 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-semibold uppercase tracking-extra-wide text-status-neutral-on;
+ }
+
+ .badge[data-variant="info"] {
+ @apply border-status-info-border bg-status-info-surface text-status-info-on;
+ }
+
+ .badge[data-variant="success"] {
+ @apply border-status-success-border bg-status-success-surface text-status-success-on;
+ }
+
+ .badge[data-variant="warning"] {
+ @apply border-status-warning-border bg-status-warning-surface text-status-warning-on;
+ }
+
+ .badge[data-variant="critical"] {
+ @apply border-status-danger-border bg-status-danger-surface text-status-danger-on;
+ }
+
+ .badge[data-variant="private"] {
+ @apply border-status-private-border bg-status-private-surface text-status-private-on;
+ }
+
+ .badge[data-variant="neutral"] {
+ @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on;
+ }
+
+ .moderation-badge {
+ @apply inline-flex flex-col items-start gap-sm rounded-xl border px-3 py-1.5 text-xs font-semibold normal-case tracking-tight shadow-sm;
+ }
+
+ .moderation-badge--interactive {
+ pointer-events: auto;
+ }
+
+ .moderation-badge__actions {
+ @apply inline-flex flex-nowrap items-center gap-sm;
+ }
+
+ .moderation-badge__label {
+ @apply inline-flex items-center gap-xs whitespace-nowrap;
+ }
+
+ .moderation-badge[data-variant="warning"] {
+ @apply border-status-warning-border bg-status-warning-surface text-status-warning-on;
+ box-shadow: 0 var(--shadow-badge-offset-y) var(--shadow-badge-blur)
+ color-mix(in srgb, var(--status-warning) 18%, transparent);
+ }
+
+ .moderation-badge[data-variant="neutral"] {
+ @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on;
+ box-shadow: 0 var(--shadow-badge-offset-y) var(--shadow-badge-blur)
+ color-mix(in srgb, var(--status-neutral) 18%, transparent);
+ }
+
+ .moderation-badge__icon {
+ @apply inline-flex h-5 w-5 items-center justify-center rounded-full bg-status-warning-surface text-status-warning-on;
+ background-color: color-mix(
+ in srgb,
+ var(--status-warning) 18%,
+ transparent
+ );
+ color: var(--status-warning-on);
+ }
+
+ .moderation-badge[data-variant="neutral"] .moderation-badge__icon {
+ @apply bg-status-neutral-surface text-status-neutral-on;
+ background-color: color-mix(
+ in srgb,
+ var(--status-neutral) 18%,
+ transparent
+ );
+ color: var(--status-neutral-on);
+ }
+
+ .moderation-badge__icon-mark {
+ @apply h-3.5 w-3.5;
+ }
+
+ .moderation-badge__text {
+ @apply whitespace-nowrap text-xs font-semibold tracking-tight;
+ }
+
+ .moderation-badge__action {
+ @apply inline-flex items-center gap-1.5 rounded-full border border-status-warning-border bg-status-warning-surface px-3 py-1 text-xs font-semibold normal-case tracking-tight text-status-warning-on transition duration-150 ease-out;
+ background-color: color-mix(
+ in srgb,
+ var(--status-warning) 16%,
+ transparent
+ );
+ border-color: color-mix(
+ in srgb,
+ var(--status-warning-border) 80%,
+ transparent
+ );
+ color: var(--status-warning-on);
+ }
+
+ .moderation-badge[data-variant="warning"] .moderation-badge__action:hover {
+ background-color: color-mix(
+ in srgb,
+ var(--status-warning) 24%,
+ transparent
+ );
+ }
+
+ .moderation-badge[data-variant="neutral"] .moderation-badge__action {
+ @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on;
+ background-color: color-mix(
+ in srgb,
+ var(--status-neutral) 16%,
+ transparent
+ );
+ border-color: color-mix(
+ in srgb,
+ var(--status-neutral-border) 80%,
+ transparent
+ );
+ color: var(--status-neutral-on);
+ }
+
+ .moderation-badge[data-variant="neutral"] .moderation-badge__action:hover {
+ background-color: color-mix(
+ in srgb,
+ var(--status-neutral) 24%,
+ transparent
+ );
+ }
+
+ .moderation-badge__action:focus-visible {
+ outline: var(--outline-thick-width) solid
+ color-mix(in srgb, var(--status-warning) 38%, transparent);
+ outline-offset: var(--space-3xs);
+ }
+
+ .moderation-badge[data-variant="neutral"]
+ .moderation-badge__action:focus-visible {
+ outline: var(--outline-thick-width) solid
+ color-mix(in srgb, var(--status-neutral) 38%, transparent);
+ }
+
+ .moderation-badge__action[disabled] {
+ cursor: wait;
+ opacity: 0.7;
+ }
+
+ .pill {
+ @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-xs font-medium text-status-neutral-on;
+ }
+
+ .pill[data-size="compact"] {
+ @apply px-2 py-0.5 text-2xs;
+ }
+
+ .pill[data-variant="info"] {
+ @apply border-status-info-border bg-status-info-surface text-status-info-on;
+ }
+
+ .pill[data-variant="success"] {
+ @apply border-status-success-border bg-status-success-surface text-status-success-on;
+ }
+
+ .pill[data-variant="warning"] {
+ @apply border-status-warning-border bg-status-warning-surface text-status-warning-on;
+ }
+
+ .pill[data-variant="critical"] {
+ @apply border-status-danger-border bg-status-danger-surface text-status-danger-on;
+ }
+
+ .pill[data-variant="private"] {
+ @apply border-status-private-border bg-status-private-surface text-status-private-on;
+ }
+
+ .pill[data-variant="neutral"] {
+ @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on;
+ }
+
+ .overlay-scrim {
+ background-color: var(--surface-overlay);
+ }
+
+ .overlay-scrim[data-strength="muted"] {
+ background-color: var(--surface-overlay-muted);
+ }
+
+ .overlay-scrim[data-strength="strong"] {
+ background-color: var(--surface-overlay-strong);
+ }
+
+ .overlay-panel {
+ background-color: var(--surface-overlay-panel);
+ }
+
+ .overlay-panel[data-variant="soft"] {
+ background-color: var(--surface-overlay-panel-soft);
+ }
+
+ .overlay-panel[data-variant="glass"] {
+ background-color: var(--surface-overlay-panel-glass);
+ }
+
+ .menu {
+ @apply flex flex-col gap-1 py-2;
+ }
+
+ .menu__heading {
+ @apply px-4 pb-2 text-xs font-semibold uppercase tracking-wide text-muted;
+ }
+
+ .menu__separator {
+ @apply my-2 h-px bg-border bg-opacity-20;
+ }
+
+ .menu__item {
+ @apply focus-ring relative flex w-full items-center gap-3 rounded-md px-4 py-2 text-sm font-medium text-text transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-in-out)];
+ }
+
+ .menu__item:hover {
+ @apply bg-panel-hover text-text;
+ }
+
+ .menu__item[data-state="active"] {
+ @apply bg-accent bg-opacity-20 text-accent-strong;
+ }
+
+ .menu__item[data-variant="critical"] {
+ @apply text-critical-strong;
+ }
+
+ .menu__item[data-variant="critical"]:hover {
+ @apply bg-critical bg-opacity-20;
+ }
+
+ .menu__item:disabled,
+ .menu__item[aria-disabled="true"] {
+ @apply cursor-not-allowed bg-transparent text-muted opacity-60;
+ }
+
+ .menu__item:disabled:hover,
+ .menu__item[aria-disabled="true"]:hover {
+ @apply bg-transparent text-muted;
+ }
+
+ .card {
+ min-width: 0;
+ --video-card-lift-translate-y: 0;
+ --video-card-backdrop-opacity: 0;
+ --video-card-backdrop-translate-y: var(--space-md-plus);
+ --video-card-backdrop-scale: 1.08;
+ --video-card-backdrop-blur: var(--blur-thumbnail-blur);
+ @apply focus-ring relative rounded-lg border border-transparent bg-card text-text shadow-md transition duration-base ease-in-out;
+ transform: translate3d(0, var(--video-card-lift-translate-y), 0);
+ transition-property:
+ transform, box-shadow, border-color, background-color, color;
+ will-change: transform;
+ isolation: isolate;
+ }
+
+ .card::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ opacity: var(--video-card-backdrop-opacity);
+ background-image: var(--video-card-thumb-url, none);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ transform: translate3d(0, var(--video-card-backdrop-translate-y), 0)
+ scale(var(--video-card-backdrop-scale));
+ filter: blur(var(--video-card-backdrop-blur));
+ transition:
+ opacity var(--motion-duration-base) var(--motion-ease-in-out),
+ transform var(--motion-duration-base) var(--motion-ease-in-out),
+ filter var(--motion-duration-base) var(--motion-ease-in-out);
+ pointer-events: none;
+ will-change: opacity, transform, filter;
+ }
+
+ .card > * {
+ position: relative;
+ z-index: 1;
+ }
+
+ .card--compact {
+ @apply flex flex-row items-start gap-md;
+ }
+
+ .card--compact .video-card__media {
+ inline-size: clamp(
+ var(--video-card-compact-media-min),
+ calc(var(--video-modal-secondary-min) * 0.4),
+ var(--video-card-compact-media-max)
+ );
+ flex-basis: clamp(
+ var(--video-card-compact-media-min),
+ calc(var(--video-modal-secondary-min) * 0.4),
+ var(--video-card-compact-media-max)
+ );
+ @apply block shrink-0 overflow-hidden rounded-lg;
+ }
+
+ .card--compact .video-card__content {
+ @apply flex min-w-0 flex-1 flex-col gap-sm p-md;
+ }
+
+ .card--compact .video-card__title {
+ @apply text-base font-semibold leading-snug;
+ }
+
+ .card--compact .video-card__author-name {
+ @apply text-xs;
+ }
+
+ .card--compact .video-card__meta {
+ @apply mt-0 flex items-center gap-2 text-2xs text-muted-strong;
+ }
+
+ .card--compact .video-card__meta .view-count-text {
+ @apply text-2xs;
+ }
+
+ .card:hover,
+ .card:focus-within {
+ --video-card-lift-translate-y: var(--motion-video-card-hover-translate);
+ --video-card-backdrop-opacity: 0.425;
+ --video-card-backdrop-translate-y: var(
+ --motion-video-card-backdrop-translate
+ );
+ --video-card-backdrop-scale: 1.12;
+ --video-card-backdrop-blur: var(--blur-video-card-backdrop-strong);
+ @apply shadow-lg;
+ }
+
+ .card:focus-visible {
+ @apply border-accent border-opacity-40 shadow-lg;
+ }
+
+ .card[data-state="critical"] {
+ @apply border border-critical border-opacity-40 bg-card-critical;
+ }
+
+ .card[data-state="private"] {
+ @apply bg-card-private shadow-lg;
+ }
+
+ .card[data-state="disabled"] {
+ @apply opacity-60 shadow-none;
+ }
+
+ .video-card__title {
+ transition: color var(--motion-duration-base) var(--motion-ease-in-out);
+ }
+
+ .video-card__title:hover,
+ .video-card__title:focus-visible {
+ color: var(--color-accent);
+ }
+
+ .form-control {
+ @apply focus-ring block w-full rounded-md border border-border-subtle bg-surface-alt px-3 py-2 text-sm text-text shadow-sm transition duration-base ease-in-out placeholder:text-muted;
+ }
+
+ .form-control:hover {
+ @apply border-border;
+ }
+
+ .form-control:focus-visible {
+ @apply border-accent-strong;
+ }
+
+ .form-control:disabled {
+ @apply cursor-not-allowed bg-surface text-muted opacity-60;
+ }
+
+ .form-control:invalid {
+ @apply border-critical border-opacity-60;
+ }
+
+ .form-control[data-state="locked"],
+ .input[data-state="locked"],
+ .textarea[data-state="locked"],
+ .select[data-state="locked"],
+ textarea.form-control[data-state="locked"],
+ select.form-control[data-state="locked"] {
+ @apply cursor-default border-border-sidebar-strong bg-overlay-panel-soft text-muted;
+ }
+
+ .form-control[data-state="locked"]:focus-visible,
+ .input[data-state="locked"]:focus-visible,
+ .textarea[data-state="locked"]:focus-visible,
+ .select[data-state="locked"]:focus-visible,
+ textarea.form-control[data-state="locked"]:focus-visible,
+ select.form-control[data-state="locked"]:focus-visible {
+ @apply border-border-sidebar-strong shadow-none outline-none ring-0 ring-offset-0;
+ }
+
+ .form-control[data-state="locked"]:disabled,
+ .input[data-state="locked"]:disabled,
+ .textarea[data-state="locked"]:disabled,
+ .select[data-state="locked"]:disabled,
+ textarea.form-control[data-state="locked"]:disabled,
+ select.form-control[data-state="locked"]:disabled {
+ @apply cursor-default opacity-100;
+ }
+
+ .input {
+ @apply form-control;
+ }
+
+ .textarea {
+ @apply form-control min-h-[var(--form-textarea-min-height)] resize-y;
+ }
+
+ .select {
+ @apply form-control appearance-none pr-10;
+ --select-arrow-color: var(--color-border);
+ background-image:
+ linear-gradient(135deg, transparent 50%, var(--select-arrow-color) 50%),
+ linear-gradient(45deg, var(--select-arrow-color) 50%, transparent 50%),
+ linear-gradient(
+ to right,
+ var(--color-border-subtle),
+ var(--color-border-subtle)
+ );
+ background-position:
+ right var(--form-select-icon-offset) center,
+ right var(--form-select-icon-gap) center,
+ right var(--form-select-icon-hit-area) center;
+ background-size:
+ var(--form-select-icon-size) var(--form-select-icon-size),
+ var(--form-select-icon-size) var(--form-select-icon-size),
+ var(--form-select-divider-width) 60%;
+ background-repeat: no-repeat;
+ }
+
+ .select:hover {
+ --select-arrow-color: var(--color-border);
+ }
+
+ .select:focus-visible {
+ --select-arrow-color: var(--color-accent-strong);
+ }
+
+ .select:disabled {
+ --select-arrow-color: var(--color-border-subtle);
+ }
+
+ .select:invalid {
+ --select-arrow-color: var(--color-critical);
+ }
+
+ .checkbox {
+ @apply focus-ring inline-flex h-5 w-5 cursor-pointer appearance-none items-center justify-center rounded border border-border-subtle bg-surface-alt text-white transition duration-base ease-in-out;
+ }
+
+ .checkbox:hover {
+ @apply border-border;
+ }
+
+ .checkbox:disabled {
+ @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
+ }
+
+ .checkbox::after {
+ content: "";
+ @apply pointer-events-none h-2 w-3 border-b-2 border-r-2 border-white opacity-0 transition duration-base ease-in-out;
+ transform: rotate(45deg) translateY(var(--form-checkbox-checkmark-offset))
+ scale(0.85);
+ }
+
+ .checkbox:checked,
+ .checkbox[aria-checked="true"] {
+ @apply border-accent-strong bg-accent-strong;
+ }
+
+ .checkbox:checked::after,
+ .checkbox[aria-checked="true"]::after {
+ @apply opacity-100;
+ transform: rotate(45deg) translateY(var(--form-checkbox-checkmark-offset))
+ scale(1);
+ }
+
+ .switch {
+ @apply focus-ring relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border border-border-subtle bg-border-subtle transition-colors duration-base ease-in-out;
+ }
+
+ .switch::before {
+ content: "";
+ @apply pointer-events-none absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 transform rounded-full bg-surface shadow-md transition duration-base ease-in-out;
+ }
+
+ .switch:disabled {
+ @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60;
+ }
+
+ .switch[aria-checked="true"],
+ .switch.is-on {
+ @apply border-accent-strong bg-accent-strong;
+ }
+
+ .switch[aria-checked="true"]::before,
+ .switch.is-on::before {
+ @apply translate-x-5;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .form-control,
+ .checkbox,
+ .checkbox::after,
+ .switch,
+ .switch::before,
+ .popover-panel,
+ .popover__panel,
+ .menu__item {
+ transition: none !important;
+ }
+ }
+
+ .bv-modal {
+ @apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-6 sm:p-8;
+ }
+
+ .bv-modal[hidden],
+ .bv-modal.hidden {
+ display: none !important;
+ }
+
+ .bv-modal__panel {
+ @apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-modal rounded-modal-xl border border-border-translucent px-8 pb-8 pt-7 text-left text-text shadow-modal transition duration-base ease-out;
+ background-color: var(--color-modal-surface, var(--color-overlay-panel));
+ }
+
+ .bv-modal__panel:focus-visible {
+ @apply border-border-translucent-bright;
+ }
+
+ .bv-modal-backdrop {
+ @apply fixed inset-0 z-[var(--z-modal-overlay)] backdrop-saturate-150;
+ background-color: var(--color-modal-backdrop, var(--color-overlay-muted));
+ backdrop-filter: blur(var(--blur-modal-backdrop));
+ -webkit-backdrop-filter: blur(var(--blur-modal-backdrop));
+ }
+
+ .bv-modal-backdrop[data-variant="veil"] {
+ @apply backdrop-blur-3xl;
+ background-color: var(--color-overlay-veil);
+ }
+
+ .bv-modal-backdrop[data-variant="muted"] {
+ background-color: var(--color-overlay-muted);
+ }
+
+ .modal-sheet {
+ @apply bv-modal__panel relative my-0 w-full overflow-hidden;
+ max-width: var(--modal-sheet-inline-max);
+ overscroll-behavior: contain;
+ }
+
+ @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+ .bv-modal {
+ align-items: stretch;
+ justify-content: stretch;
+ padding: 0;
+ }
+
+ .bv-modal__panel,
+ .modal-sheet {
+ inline-size: 100vw;
+ block-size: 100vh;
+ max-width: none;
+ max-height: none;
+ margin: 0;
+ border-radius: 0;
+ border: 0;
+ padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
+ padding-right: calc(var(--space-lg) + env(safe-area-inset-right));
+ padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
+ padding-left: calc(var(--space-lg) + env(safe-area-inset-left));
+ overflow: auto;
+ }
+ }
+
+ .modal-header {
+ @apply flex items-start justify-between gap-md px-8 pb-4 pt-7;
+ background: transparent;
+ border: 0;
+ }
+
+ .modal-header[data-variant="flush"] {
+ @apply px-0 pb-0 pt-0;
+ background: transparent;
+ }
+
+ .modal-header__title {
+ @apply text-xl font-bold text-text;
+ }
+
+ .modal-close {
+ @apply focus-ring flex h-10 w-10 items-center justify-center rounded-full transition duration-base ease-out;
+ border: var(--border-width-hairline) solid
+ var(--color-border-translucent-medium);
+ background: var(--color-surface-tint-subtle);
+ color: var(--color-text-frosted-strong);
+ }
+
+ .modal-close:hover {
+ background: var(--color-border-translucent);
+ border-color: var(--color-border-translucent-stronger);
+ color: var(--color-text);
+ }
+
+ .modal-back {
+ @apply inline-flex items-center gap-2;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .modal-back {
+ display: none !important;
+ }
+ }
+
+ .modal-body {
+ @apply space-y-5 px-8 pb-8 pt-2;
+ overscroll-behavior: contain;
+ }
+
+ .modal-body {
+ scrollbar-width: thin;
+ }
+
+ .modal-body::-webkit-scrollbar {
+ width: var(--scrollbar-thin-width);
+ }
+
+ .modal-body::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .modal-body::-webkit-scrollbar-thumb {
+ background: var(--color-border-translucent);
+ border-radius: var(--radius-full);
+ }
+
+ /* Modal embed containers ensure iframe wrappers respect modal sizing tokens. */
+ .modal-embed-frame {
+ @apply flex h-modal-embed max-h-modal-embed w-full flex-col;
+ }
+
+ .modal-footer {
+ @apply flex flex-col gap-3 px-8 pb-8 pt-4;
+ }
+
+ .modal-alert {
+ @apply flex items-start gap-3 rounded-md border border-warning-strong border-opacity-60 px-4 py-3 text-sm text-warning-strong;
+ backdrop-filter: blur(var(--blur-modal-alert));
+ background-color: var(--color-warning-glass);
+ }
+
+ .modal-alert__icon {
+ @apply mt-0.5 h-5 w-5 flex-shrink-0 text-warning-strong;
+ }
+
+ .modal-tile {
+ @apply rounded-xl border border-border-translucent bg-overlay-panel-soft px-5 py-4 text-sm text-text-frosted;
+ background-color: var(--color-overlay-panel-glass-soft);
+ }
+
+ .modal-tile > h3 {
+ @apply text-base font-semibold text-text;
+ }
+
+ .modal-primary {
+ @apply btn w-full justify-center;
+ }
+
+ .grid-stack {
+ @apply grid gap-lg;
+ }
+
+ .grid-stack[data-variant="cards"] {
+ @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3;
+ }
+
+ .grid-stack[data-orientation="vertical"] {
+ @apply flex flex-col gap-md;
+ }
+
+ .bv-stack {
+ @apply flex flex-col gap-lg;
+ }
+
+ .bv-stack--tight {
+ @apply gap-md;
+ }
+
+ .bv-grid-video {
+ @apply grid gap-xl py-lg;
+ grid-template-columns: repeat(
+ auto-fill,
+ minmax(var(--grid-card-min-width), 1fr)
+ );
+ }
+
+ .card[data-alert="nsfw-owner"] {
+ @apply border border-critical border-opacity-40 bg-black;
+ }
+
+ .card[data-alert="nsfw-owner"]:hover {
+ @apply border-opacity-60 shadow-lg;
+ }
+
+ .card img[data-thumbnail-state="blurred"],
+ .card img[data-visual-state="blurred"],
+ .channel-profile-container img[data-visual-state="blurred"] {
+ @apply transition duration-base ease-in-out;
+ filter: blur(var(--blur-thumbnail-blur));
+ transform: scale(1.05);
+ }
+
+ .channel-moderation-badge-anchor {
+ @apply flex flex-col gap-sm;
+ pointer-events: none;
+ width: 100%;
+ }
+
+ .channel-moderation-badge-anchor:empty {
+ display: none;
+ }
+
+ .channel-moderation-badge-anchor > [data-moderation-badge="true"] {
+ pointer-events: auto;
+ max-width: min(100%, var(--moderation-badge-max-inline));
+ }
+
+ #playerModal .video-modal__video {
+ position: relative;
+ }
+
+ #playerModal
+ .video-modal__video[data-visual-state="blurred"]
+ .video-modal__media {
+ @apply transition duration-base ease-in-out;
+ filter: blur(var(--blur-thumbnail-blur));
+ transform: scale(1.05);
+ }
+
+ #playerModal .video-modal__moderation-bar {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: var(--space-md);
+ }
+
+ #playerModal .video-modal__moderation-bar[hidden] {
+ display: none;
+ }
+
+ #playerModal .video-modal__moderation-bar .moderation-badge {
+ width: 100%;
+ max-width: none;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: var(--space-sm);
+ @apply px-4 py-3;
+ }
+
+ #playerModal .video-modal__moderation-bar .moderation-badge__label {
+ flex: 1 1 auto;
+ }
+
+ #playerModal .video-modal__moderation-bar .moderation-badge__actions {
+ flex-shrink: 0;
+ }
+
+ .card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
+ @apply border border-critical border-opacity-40 bg-card-critical;
+ }
+
+ .video-visibility-toggle {
+ @apply inline-flex items-center gap-1 rounded-full border border-border bg-panel px-1 py-1;
+ }
+
+ .video-visibility-toggle__option {
+ @apply inline-flex items-center justify-center rounded-full border border-transparent bg-panel px-3 py-2 text-xs font-semibold uppercase text-muted transition duration-base ease-in-out;
+ }
+
+ .video-visibility-toggle__option:not(.is-disabled):hover {
+ @apply bg-panel-hover text-text;
+ }
+
+ .video-visibility-toggle__option[data-active="true"] {
+ @apply border border-accent border-opacity-60 text-text shadow-lg;
+ }
+
+ .video-visibility-toggle__option.is-disabled {
+ @apply cursor-not-allowed opacity-45;
+ }
+
+ .video-modal__container {
+ @apply flex h-full min-h-screen w-full flex-1 flex-col;
+ }
+
+ .player-modal__container {
+ @apply video-modal__container gap-6;
+ }
+
+ #playerModal {
+ --player-modal-vertical-padding: var(--space-md-plus);
+ --player-modal-primary-inline-padding-lg: clamp(
+ var(--space-sm),
+ 2.75vw,
+ var(--space-lg)
+ );
+ }
+
+ #playerModal > .bv-modal__panel {
+ max-width: none;
+ width: 100%;
+ min-height: 100%;
+ padding: 0;
+ border-radius: 0;
+ box-shadow: none;
+ border: none;
+ background-color: var(--color-surface);
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: flex-start;
+ flex: 1 1 auto;
+ }
+
+ .video-modal__panel {
+ position: relative;
+ z-index: var(--z-modal-content);
+ display: flex;
+ flex: 1 1 auto;
+ width: 100%;
+ min-height: 100%;
+ flex-direction: column;
+ overflow: visible;
+ padding: 0;
+ margin: 0;
+ border: none;
+ border-radius: 0;
+ background-color: var(--color-surface);
+ box-shadow: none;
+ }
+
+ #playerModal .watch-container {
+ width: 100%;
+ max-width: var(--player-modal-inline-max, var(--layout-player-max-width));
+ margin-inline: auto;
+ padding-inline: var(
+ --player-modal-inline-padding,
+ clamp(var(--space-md), 4vw, var(--space-xl-plus))
+ );
+ overflow: visible;
+ }
+
+ #playerModal .watch-container.video-modal__similar {
+ padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs));
+ }
+
+ #playerModal .video-modal__primary > .watch-container:first-child {
+ padding-block-start: var(--player-modal-vertical-padding);
+ }
+
+ #playerModal .video-modal__primary > .watch-container:last-child {
+ padding-block-end: var(--player-modal-vertical-padding);
+ }
+
+ #playerModal .video-modal__secondary > .watch-container:last-child {
+ padding-block-end: var(--player-modal-vertical-padding);
+ }
+
+ #playerModal .modal-nav .watch-container {
+ max-width: none;
+ margin-inline: 0;
+ }
+
+ #playerModal .modal-info-panel {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md-plus);
+ }
+
+ #playerModal h2#videoTitle {
+ margin: 0;
+ font-size: clamp(
+ var(--font-size-xl),
+ calc(var(--font-size-modal-title-base) + 0.5vw),
+ var(--font-size-xl-plus)
+ );
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--color-text);
+ min-width: 0;
+ overflow-wrap: break-word;
+ word-break: break-word;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .video-modal__headline #videoTitle.video-modal__title {
+ flex: 1 1 0%;
+ min-width: 0;
+ max-width: calc(100% - var(--space-3xl) - var(--space-md));
+ }
+
+ .video-modal__headline .video-modal__status {
+ flex: 0 0 auto;
+ max-width: clamp(var(--space-xl), 25%, var(--space-3xl));
+ margin-left: auto;
+ }
+ }
+
+ #playerModal .modal-meta {
+ font-size: var(--font-size-sm);
+ line-height: 1.4;
+ color: var(--color-text-muted);
+ }
+
+ #playerModal .modal-view-count {
+ font-weight: 600;
+ color: var(--color-text);
+ }
+
+ #playerModal .channel-card {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md) var(--space-lg);
+ border-radius: var(--radius-xl);
+ border: var(--border-width-hairline) solid var(--color-border-translucent);
+ background-color: var(--color-surface);
+ box-shadow: var(--shadow-sm);
+ }
+
+ #playerModal .player-modal__module {
+ display: flex;
+ flex-direction: column;
+ gap: clamp(var(--space-2xs), 1vw, var(--space-sm));
+ width: 100%;
+ padding: clamp(var(--space-xs), 1vw, var(--space-sm));
+ border-radius: var(--radius-xl);
+ border: var(--border-width-hairline) solid var(--color-border-translucent);
+ background-color: var(--color-surface);
+ box-shadow: var(--shadow-sm);
+ }
+
+ #playerModal .player-modal__module-title {
+ margin: 0;
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--color-text);
+ }
+
+ #playerModal .player-modal__module-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ #playerModal .video-modal__similar .player-modal__module {
+ gap: clamp(var(--space-3xs), 0.6vw, var(--space-xs));
+ padding: clamp(var(--space-2xs), 0.6vw, var(--space-xs));
+ border-width: 0;
+ box-shadow: none;
+ background-color: transparent;
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-title {
+ padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs));
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-list {
+ gap: clamp(var(--space-3xs), 0.6vw, var(--space-xs));
+ padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs));
+ padding-bottom: clamp(var(--space-3xs), 0.6vw, var(--space-2xs));
+ }
+
+ #playerModal .player-modal__module-scroll {
+ max-height: clamp(
+ var(--player-modal-module-scroll-min-height),
+ calc(
+ 100vh - (var(--player-modal-vertical-padding) * 2) - var(--space-2xl)
+ ),
+ var(--player-modal-module-scroll-max-height)
+ );
+ overflow-y: auto;
+ overflow-x: hidden;
+ overscroll-behavior: contain;
+ scrollbar-gutter: stable;
+ padding-inline-end: var(--space-xs);
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-scroll {
+ max-height: none;
+ overflow: visible;
+ padding-inline-end: 0;
+ scrollbar-gutter: auto;
+ }
+
+ #playerModal .player-modal__module-scroll > li {
+ scroll-margin-block: var(--space-xs);
+ }
+
+ @media (max-width: theme("screens.xs")) {
+ #playerModal .modal-nav .icon-button {
+ width: var(--space-xl);
+ height: var(--space-xl);
+ min-width: var(--space-xl);
+ min-height: var(--space-xl);
+ }
+
+ #playerModal .watch-container {
+ padding-inline: var(--space-sm);
+ }
+
+ #playerModal .channel-card {
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ }
+ }
+
+ #playerModal .channel-card__avatar {
+ flex-shrink: 0;
+ width: var(--avatar-size-lg);
+ height: var(--avatar-size-lg);
+ border-radius: var(--radius-full);
+ overflow: hidden;
+ background-color: var(--color-border-subtle);
+ }
+
+ #playerModal .channel-card__avatar img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ #playerModal .channel-card__name {
+ margin: 0;
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-text);
+ }
+
+ #playerModal .channel-card__npub {
+ margin: 0;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-muted);
+ }
+
+ #playerModal .description-panel {
+ padding: var(--space-md-plus) var(--space-lg);
+ border-radius: var(--radius-xl);
+ border: var(--border-width-hairline) solid var(--color-border-translucent);
+ background-color: var(--color-surface);
+ box-shadow: var(--shadow-sm);
+ }
+
+ #playerModal .description-panel p {
+ margin: 0;
+ font-size: var(--font-size-sm);
+ line-height: 1.6;
+ color: var(--color-text);
+ }
+
+ .player-modal__content {
+ @apply video-modal__panel;
+ }
+
+ #playerModal .modal-nav {
+ @apply sticky top-0 z-overlay-nav translate-y-0 transition-transform duration-150;
+ background-color: var(--surface-overlay-panel);
+ background-image: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--surface-overlay-panel) 94%, transparent) 0%,
+ color-mix(in srgb, var(--surface-overlay-panel) 88%, transparent) 100%
+ );
+ border-bottom: var(--border-width-hairline) solid var(--border-overlay);
+ backdrop-filter: blur(var(--modal-nav-backdrop-blur));
+ -webkit-backdrop-filter: blur(var(--modal-nav-backdrop-blur));
+ }
+
+ #playerModal .modal-nav__bar {
+ @apply flex w-full items-center justify-start gap-2;
+ padding-block: var(--space-xs);
+ padding-inline: clamp(var(--space-sm), 2.5vw, var(--space-lg));
+ }
+
+ #playerModal .modal-nav__rail {
+ @apply flex w-full items-center justify-between gap-2;
+ }
+
+ #playerModal .modal-nav__slot {
+ @apply flex items-center gap-2;
+ }
+
+ #playerModal .modal-nav__slot--context {
+ @apply justify-end;
+ margin-inline-start: auto;
+ min-inline-size: 0;
+ }
+
+ #playerModal .modal-nav__context {
+ @apply text-xs font-semibold uppercase tracking-wide text-muted;
+ }
+
+ #playerModal .modal-nav .modal-actions {
+ @apply flex items-center gap-2;
+ margin-left: 0;
+ align-self: stretch;
+ }
+
+ #playerModal .modal-nav .icon-button {
+ @apply inline-flex items-center justify-center rounded-full text-muted transition duration-150 ease-out;
+ inline-size: var(--icon-size-md);
+ block-size: var(--icon-size-md);
+ background: var(--surface-overlay-panel-tint);
+ border: var(--border-width-hairline) solid var(--border-overlay);
+ color: var(--color-text-muted);
+ }
+
+ #playerModal .modal-nav .icon-button:hover,
+ #playerModal .modal-nav .icon-button:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ border-color: var(--border-overlay-strong);
+ color: var(--color-text);
+ }
+
+ .modal-nav--hidden {
+ @apply -translate-y-full;
+ }
+
+ .modal-nav--visible {
+ @apply translate-y-0;
+ }
+
+ .video-modal__layout {
+ --video-modal-secondary-size: clamp(
+ var(--video-modal-secondary-min),
+ 46vw,
+ var(--video-modal-secondary-max)
+ );
+ --video-modal-gap: clamp(var(--space-2xs), 0.85vw, var(--space-sm));
+ @apply grid;
+ gap: var(--video-modal-gap);
+ width: min(100%, var(--video-modal-layout-max));
+ margin-inline: auto;
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-areas:
+ "primary"
+ "secondary";
+ align-items: start;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .video-modal__layout {
+ --video-modal-secondary-size: clamp(
+ var(--video-modal-secondary-min),
+ 30vw,
+ var(--video-modal-secondary-max)
+ );
+ grid-template-columns:
+ minmax(0, 1fr)
+ minmax(
+ var(--video-modal-secondary-min),
+ var(--video-modal-secondary-size)
+ );
+ grid-template-areas: "primary secondary";
+ align-items: stretch;
+ grid-auto-flow: column;
+ }
+
+ .video-modal__primary {
+ min-width: 0;
+ min-height: 0;
+ grid-area: primary;
+ }
+
+ .video-modal__secondary {
+ min-width: var(--video-modal-secondary-min);
+ min-height: 0;
+ max-width: var(--video-modal-secondary-size);
+ grid-area: secondary;
+ height: 100%;
+ }
+
+ #playerModal .video-modal__layout .watch-container {
+ max-width: none;
+ margin-inline: 0;
+ width: 100%;
+ }
+ }
+
+ @media (min-width: theme("screens.xl")) {
+ .video-modal__layout {
+ --video-modal-secondary-size: clamp(
+ var(--video-modal-secondary-min),
+ 28vw,
+ var(--video-modal-secondary-max)
+ );
+ }
+ }
+
+ #playerModal .video-modal__layout {
+ display: grid;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ #playerModal .video-modal__layout {
+ grid-template-columns:
+ minmax(0, 1fr)
+ minmax(
+ var(--video-modal-secondary-min),
+ var(--video-modal-secondary-size)
+ );
+ grid-template-areas: "primary secondary";
+ align-items: stretch;
+ grid-auto-flow: column;
+ }
+
+ #playerModal .video-modal__primary {
+ grid-area: primary;
+ }
+
+ #playerModal .video-modal__secondary {
+ grid-area: secondary;
+ }
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ #playerModal .video-modal__primary {
+ --player-modal-inline-padding: var(
+ --player-modal-primary-inline-padding-lg,
+ clamp(var(--space-sm), 2.75vw, var(--space-lg))
+ );
+ }
+
+ #playerModal .modal-nav__bar {
+ --player-modal-inline-padding: var(
+ --player-modal-primary-inline-padding-lg,
+ clamp(var(--space-sm), 2.75vw, var(--space-lg))
+ );
+ }
+ }
+
+ .revert-modal__layout {
+ @apply grid gap-6;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .revert-modal__layout {
+ grid-template-columns:
+ minmax(
+ var(--revert-modal-sidebar-min),
+ var(--revert-modal-sidebar-width)
+ )
+ minmax(0, 1fr);
+ }
+ }
+
+ .video-modal__primary {
+ @apply flex flex-col gap-6;
+ min-width: 0;
+ min-height: 0;
+ }
+
+ .video-modal__secondary {
+ @apply flex flex-col gap-4;
+ min-width: 0;
+ min-height: 0;
+ width: 100%;
+ align-self: stretch;
+ }
+
+ .video-modal__similar {
+ display: none;
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .video-modal__similar {
+ @apply flex flex-col gap-6;
+ align-self: stretch;
+ flex: 1 1 auto;
+ min-height: 0;
+ }
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ #playerModal .video-modal__similar .player-modal__module {
+ height: 100%;
+ display: flex;
+ flex: 1 1 auto;
+ min-height: 0;
+ flex-direction: column;
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-list {
+ flex: 1 1 auto;
+ min-height: 0;
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-scroll {
+ height: 100%;
+ max-height: none;
+ min-height: 0;
+ }
+ }
+
+ #playerModal .player-modal__module-item {
+ width: 100%;
+ }
+
+ #playerModal
+ .player-modal__module-item
+ > .card:not(.player-modal__similar-card) {
+ @apply flex w-full flex-row flex-nowrap items-stretch gap-md;
+ }
+
+ #playerModal
+ .player-modal__module-item
+ > .card:not(.player-modal__similar-card)
+ .video-card__media {
+ width: clamp(
+ var(--video-modal-item-media-min),
+ 18vw,
+ var(--video-modal-item-media-max)
+ );
+ @apply shrink-0 overflow-hidden rounded-lg;
+ }
+
+ #playerModal
+ .player-modal__module-item
+ > .card:not(.player-modal__similar-card)
+ .video-card__content {
+ padding: clamp(var(--space-sm), 1.25vw, var(--space-md));
+ @apply flex min-w-0 flex-1 flex-col gap-sm;
+ }
+
+ #playerModal
+ .player-modal__module-item
+ > .card:not(.player-modal__similar-card)
+ .video-card__meta {
+ @apply flex flex-wrap items-center gap-2 text-xs text-muted-strong;
+ }
+
+ #playerModal .video-modal__similar .player-modal__module-list {
+ gap: clamp(var(--space-2xs), 0.85vw, var(--space-sm));
+ }
+
+ .player-modal__similar-card {
+ @apply focus-ring relative flex w-full min-w-0 items-start gap-3 rounded-xl p-2 transition duration-base ease-out;
+ }
+
+ .player-modal__similar-card:hover,
+ .player-modal__similar-card:focus-within {
+ background-color: var(--surface-panel-hover);
+ }
+
+ .player-modal__similar-card-media {
+ @apply relative block shrink-0 overflow-hidden rounded-lg bg-surface-alt;
+ width: var(--similar-card-media-width);
+ aspect-ratio: 16 / 9;
+ background-image: var(--similar-card-thumb-url, none);
+ background-position: center;
+ background-size: cover;
+ }
+
+ @media (max-width: theme("screens.sm")) {
+ .player-modal__similar-card-media {
+ width: var(--similar-card-media-width-sm);
+ }
+ }
+
+ .player-modal__similar-card-media img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: inherit;
+ }
+
+ .player-modal__similar-card-content {
+ @apply flex min-w-0 flex-1 flex-col gap-1;
+ }
+
+ .player-modal__similar-card-title {
+ @apply text-sm font-semibold leading-snug text-text transition-colors duration-base ease-out;
+ min-width: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ .player-modal__similar-card:hover .player-modal__similar-card-title,
+ .player-modal__similar-card-title:focus-visible {
+ color: var(--color-accent-strong);
+ }
+
+ .player-modal__similar-card-author {
+ @apply flex min-w-0 items-center;
+ }
+
+ .player-modal__similar-card-author-meta {
+ @apply flex min-w-0 flex-col;
+ }
+
+ .player-modal__similar-card-author-name {
+ @apply truncate text-xs font-medium text-muted transition-colors duration-base ease-out;
+ }
+
+ .player-modal__similar-card:hover .player-modal__similar-card-author-name {
+ @apply text-text-strong;
+ }
+
+ /* Hidden for now to match cleaner modern look, but kept in DOM if needed */
+ .player-modal__similar-card-author-npub {
+ display: none;
+ }
+
+ .player-modal__similar-card-meta {
+ @apply flex flex-wrap items-center gap-1 text-2xs text-muted-strong;
+ min-width: 0;
+ }
+
+ .player-modal__similar-card-timestamp {
+ white-space: nowrap;
+ }
+
+ .player-modal__similar-card-separator {
+ @apply text-muted opacity-60;
+ }
+
+ .player-modal__similar-card-views {
+ white-space: nowrap;
+ }
+
+ .video-modal__stage {
+ position: relative;
+ isolation: isolate;
+ overflow: visible;
+ --video-modal-ambient-bleed: clamp(
+ var(--space-2xl),
+ 12vw,
+ var(--space-5xl)
+ );
+ --video-modal-ambient-scale: 1.38;
+ --video-modal-ambient-blur: clamp(
+ var(--video-modal-ambient-blur-min),
+ 20vw,
+ var(--video-modal-ambient-blur-max)
+ );
+ --video-modal-ambient-opacity: 1;
+ }
+
+ .video-modal__video {
+ position: relative;
+ z-index: 1;
+ border-radius: var(--radius-xl);
+ padding-block: clamp(var(--space-xs), 2.5vw, var(--space-md-plus));
+ background-color: transparent;
+ box-shadow: 0 0 0 var(--border-width-hairline)
+ color-mix(in srgb, var(--color-border-strong) 8%, transparent) inset;
+ overflow: visible;
+ }
+
+ .video-modal__ambient {
+ position: absolute;
+ inset: calc(var(--video-modal-ambient-bleed) * -1);
+ border-radius: calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));
+ pointer-events: none;
+ z-index: 0;
+ display: block;
+ overflow: visible;
+ }
+
+ .video-modal__ambient::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: radial-gradient(
+ circle at 50% 50%,
+ color-mix(in srgb, var(--color-overlay-strong) 18%, transparent) 0%,
+ color-mix(in srgb, var(--color-overlay) 34%, transparent) 62%,
+ transparent 100%
+ );
+ opacity: 0.9;
+ mix-blend-mode: screen;
+ pointer-events: none;
+ }
+
+ .video-modal__ambient-canvas {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: block;
+ transform: scale(var(--video-modal-ambient-scale));
+ filter: blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24);
+ opacity: var(--video-modal-ambient-opacity);
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .video-modal__video {
+ position: sticky;
+ top: calc(var(--space-2xl) + var(--space-3xl));
+ z-index: 1;
+ }
+
+ .video-modal__status {
+ flex-basis: clamp(var(--space-xl), 25%, var(--space-3xl));
+ max-width: clamp(var(--space-xl), 25%, var(--space-3xl));
+ }
+
+ .video-modal__details {
+ position: relative;
+ z-index: 2;
+ margin-top: var(--space-lg);
+ }
+ }
+
+ #playerModal .video-modal__video video {
+ position: relative;
+ z-index: 1;
+ background-color: var(--color-black);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-video-modal);
+ max-height: min(80vh, calc(100vw * 9 / 16));
+ object-fit: contain;
+ }
+
+ .video-modal__media {
+ display: block;
+ aspect-ratio: 16 / 9;
+ width: 100%;
+ object-fit: contain;
+ }
+
+ .video-modal__details {
+ @apply flex flex-col gap-6;
+ }
+
+ .video-modal__meta {
+ @apply border-b border-border border-opacity-20 pb-4;
+ }
+
+ /* Video modal tag strip */
+ .video-modal__tags {
+ @apply -mx-1 flex gap-2 px-1;
+ }
+
+ .video-modal__similar .video-modal__tags {
+ margin-bottom: clamp(var(--space-xs), 0.9vw, var(--space-md));
+ }
+
+ .video-modal__tags[hidden] {
+ display: none;
+ }
+
+ .video-modal__tags[data-fade] {
+ position: relative;
+ }
+
+ .video-modal__tags[data-fade]::before,
+ .video-modal__tags[data-fade]::after {
+ content: "";
+ position: sticky;
+ top: 0;
+ bottom: 0;
+ width: var(--space-lg);
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .video-modal__tags[data-fade]::before {
+ left: 0;
+ background: linear-gradient(
+ to right,
+ var(--surface-overlay-muted),
+ transparent
+ );
+ }
+
+ .video-modal__tags[data-fade]::after {
+ right: 0;
+ background: linear-gradient(
+ to left,
+ var(--surface-overlay-muted),
+ transparent
+ );
+ }
+
+ .video-tag-strip {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: var(--space-xs);
+ overflow: hidden;
+ }
+
+ .video-tag-strip--scroll {
+ overflow-x: auto;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ padding-bottom: var(--space-xs);
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+
+ .video-tag-strip--scroll::-webkit-scrollbar {
+ display: none;
+ width: 0;
+ height: 0;
+ }
+
+ .video-tag-pill {
+ @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-medium text-status-neutral-on;
+ @apply relative justify-center whitespace-nowrap transition;
+ @apply min-h-[calc(var(--space-sm)+var(--space-xs))];
+ @apply me-1;
+ }
+
+ .video-tag-pill__label {
+ @apply transition-opacity duration-150 ease-in-out;
+ opacity: 1;
+ }
+
+ .video-tag-pill__icon {
+ @apply absolute inset-0 flex items-center justify-center transition duration-150 ease-in-out;
+ opacity: 0;
+ transform: scale(0.8);
+ }
+
+ .video-tag-pill__icon svg {
+ @apply h-3 w-3;
+ }
+
+ .video-tag-pill:hover .video-tag-pill__label,
+ .video-tag-pill:focus-visible .video-tag-pill__label {
+ opacity: 0;
+ }
+
+ .video-tag-pill:hover .video-tag-pill__icon,
+ .video-tag-pill:focus-visible .video-tag-pill__icon {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ .video-modal__actions-row {
+ @apply flex w-full flex-wrap items-start gap-x-3 gap-y-3 sm:gap-x-4;
+ }
+
+ .video-modal__reactions,
+ .video-modal__actions-group {
+ flex: 1 1 var(--menu-min-width);
+ min-inline-size: 0;
+ }
+
+ .video-modal__reactions {
+ @apply flex basis-full flex-wrap items-start gap-3 sm:gap-4 md:basis-auto;
+ }
+
+ .video-modal__reaction-buttons {
+ @apply inline-flex flex-wrap items-center gap-2;
+ }
+
+ .video-modal__reaction-button {
+ --video-modal-reaction-active-bg: color-mix(
+ in srgb,
+ var(--color-accent) 22%,
+ var(--surface-overlay-panel)
+ );
+ --video-modal-reaction-active-border: color-mix(
+ in srgb,
+ var(--color-accent) 38%,
+ var(--border-overlay)
+ );
+ }
+
+ .video-modal__reaction-button[aria-pressed="true"] {
+ color: var(--color-accent-strong);
+ background-color: var(--video-modal-reaction-active-bg);
+ border-color: var(--video-modal-reaction-active-border);
+ }
+
+ .video-modal__reaction-button[aria-pressed="true"]
+ .video-modal__reaction-count {
+ color: var(--color-accent-strong);
+ }
+
+ .video-modal__reaction-count {
+ @apply text-sm font-semibold text-muted;
+ }
+
+ .video-modal__reaction-meter {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+ flex: 1 1 var(--menu-min-width);
+ max-inline-size: 100%;
+ }
+
+ .video-modal__reaction-meter-label {
+ @apply text-sm font-medium text-muted;
+ min-inline-size: var(--video-modal-reaction-label-min-inline);
+ }
+
+ .video-modal__reaction-meter-track {
+ position: relative;
+ flex: 1 1 auto;
+ inline-size: 100%;
+ block-size: var(--space-xs);
+ border-radius: var(--radius-full);
+ background-color: var(--color-border-muted);
+ overflow: hidden;
+ }
+
+ .video-modal__reaction-meter-fill {
+ position: absolute;
+ inset-inline-start: 0;
+ inset-block-start: 0;
+ block-size: 100%;
+ max-inline-size: 100%;
+ inline-size: var(--video-modal-reaction-fill, 0%);
+ width: var(--video-modal-reaction-fill, 0%);
+ background-image: linear-gradient(
+ 90deg,
+ var(--color-accent) 0%,
+ var(--color-accent-strong) 100%
+ );
+ transition: inline-size var(--motion-duration-base) var(--motion-ease-out);
+ }
+
+ .video-modal__reaction-meter-fill--empty {
+ inline-size: 0%;
+ width: 0%;
+ }
+
+ .video-modal__actions-group {
+ @apply flex basis-full flex-wrap items-start justify-start gap-3 md:basis-auto md:justify-end;
+ }
+
+ @media (min-width: theme("screens.md")) {
+ .video-modal__actions-group {
+ margin-inline-start: auto;
+ }
+ }
+
+ .video-modal__action-button {
+ @apply inline-flex h-11 items-center justify-center gap-2 rounded-full text-sm font-semibold transition duration-base ease-out;
+ min-width: var(--video-modal-action-min-width);
+ padding-inline: var(--space-md);
+ border-width: var(--border-width-hairline);
+ border-style: solid;
+ }
+
+ .video-modal__action-label {
+ @apply hidden sm:inline;
+ }
+
+ .video-modal__action-icon {
+ @apply h-5 w-5;
+ }
+
+ .video-modal__channel,
+ .video-modal__description,
+ .video-modal__stats {
+ @apply rounded-2xl border border-border border-opacity-20 bg-surface px-5 py-4 shadow-sm;
+ }
+
+ .video-modal__description-body {
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ }
+
+ .video-modal__description-body a {
+ color: var(--color-accent-strong);
+ text-decoration: underline;
+ text-decoration-color: currentColor;
+ word-break: break-word;
+ }
+
+ .video-modal__description-body a:hover,
+ .video-modal__description-body a:focus-visible {
+ color: var(--color-accent-pressed);
+ }
+
+ .video-modal__comments {
+ @apply rounded-2xl border border-border border-opacity-20 bg-surface px-5 py-5 shadow-sm;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+ }
+
+ .comment-thread {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+ }
+
+ .comment-thread__header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: var(--space-sm);
+ }
+
+ .comment-thread__title {
+ @apply text-lg font-semibold text-text;
+ }
+
+ .comment-thread__count {
+ @apply text-sm text-muted;
+ margin: 0;
+ }
+
+ .comment-thread__empty {
+ @apply text-sm text-muted;
+ margin: 0;
+ padding: var(--space-md);
+ border-radius: var(--radius-lg);
+ border: var(--border-width-hairline) dashed
+ color-mix(in srgb, var(--border-default) 40%, transparent);
+ background-color: var(--surface-alt);
+ }
+
+ .comment-thread__list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .comment-thread__item {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: var(--space-md);
+ padding-block: var(--space-sm);
+ border-bottom: var(--border-width-hairline) solid var(--border-subtle);
+ }
+
+ .comment-thread__item:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ .comment-thread__avatar {
+ inline-size: var(--comment-avatar-size);
+ block-size: var(--comment-avatar-size);
+ }
+
+ .comment-thread__avatar img {
+ @apply rounded-full object-cover;
+ inline-size: 100%;
+ block-size: 100%;
+ }
+
+ .comment-thread__content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ min-inline-size: 0;
+ }
+
+ .comment-thread__meta {
+ @apply text-xs text-muted;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-xs);
+ }
+
+ .comment-thread__author {
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .comment-thread__timestamp {
+ color: var(--text-muted);
+ }
+
+ .comment-thread__body {
+ color: var(--text-primary);
+ line-height: 1.6;
+ word-break: break-word;
+ }
+
+ .comment-thread__actions {
+ @apply text-xs;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-sm);
+ }
+
+ .comment-thread__actions button {
+ @apply focus-ring inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface px-3 py-1 text-xs font-semibold text-muted transition duration-base ease-out;
+ }
+
+ .comment-thread__actions button:hover,
+ .comment-thread__actions button:focus-visible {
+ color: var(--text-primary);
+ border-color: var(--border-default);
+ }
+
+ .comment-thread__replies {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ margin: 0;
+ margin-inline-start: calc(var(--space-lg) + var(--space-sm));
+ padding-inline-start: var(--space-md);
+ padding-block-start: var(--space-md);
+ border-inline-start: var(--border-width-hairline) solid var(--border-subtle);
+ list-style: none;
+ }
+
+ .comment-thread__load-more {
+ @apply inline-flex items-center justify-center gap-2 rounded-full border border-border-subtle bg-surface px-4 py-2 text-sm font-semibold text-text transition duration-base ease-out;
+ }
+
+ .comment-thread__load-more:hover,
+ .comment-thread__load-more:focus-visible {
+ border-color: var(--border-default);
+ color: var(--text-primary);
+ background-color: color-mix(in srgb, var(--surface-alt) 70%, transparent);
+ }
+
+ .comment-thread__disabled {
+ @apply text-sm text-muted;
+ border-radius: var(--radius-lg);
+ border: var(--border-width-hairline) dashed
+ color-mix(in srgb, var(--border-default) 32%, transparent);
+ background-color: var(--surface-alt);
+ padding: var(--space-md);
+ }
+
+ .comment-composer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ border-top: var(--border-width-hairline) solid var(--border-subtle);
+ padding-top: var(--space-lg);
+ }
+
+ .comment-composer__field {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2xs);
+ }
+
+ .comment-composer__label {
+ @apply text-sm font-semibold text-text;
+ }
+
+ .comment-composer__textarea {
+ min-block-size: var(--comment-composer-min-height);
+ }
+
+ .comment-composer__footer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ }
+
+ .comment-composer__hint {
+ @apply text-xs text-muted;
+ margin: 0;
+ }
+
+ .comment-composer__actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-end;
+ gap: var(--space-sm);
+ }
+
+ .comment-composer__char-count {
+ @apply text-xs font-medium text-muted;
+ }
+
+ .comment-composer__submit {
+ @apply focus-ring;
+ }
+
+ .comment-composer__status {
+ margin: 0;
+ }
+
+ @media (min-width: theme("screens.sm")) {
+ .comment-composer__footer {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+
+ .video-modal__progress {
+ @apply h-2 w-full overflow-hidden rounded-full bg-border-subtle;
+ }
+
+ .video-modal__stat-metrics {
+ @apply flex flex-wrap items-center justify-between gap-3 text-sm text-muted;
+ }
+
+ .profile-modal {
+ display: flex;
+ flex-direction: column;
+ inline-size: 100%;
+ block-size: 100%;
+ min-block-size: 100%;
+ max-block-size: none;
+ overflow: hidden;
+ --modal-sheet-inline-max: var(--profile-modal-inline-max);
+ --profile-modal-scale: 0.9;
+ --profile-modal-gap: calc(
+ (var(--space-md) - var(--space-3xs)) * var(--profile-modal-scale)
+ );
+ --profile-modal-padding-inline: calc(
+ (var(--space-lg) - var(--space-md)) * var(--profile-modal-scale)
+ );
+ --profile-modal-padding-block-start: calc(
+ (var(--space-md) - var(--space-2xs)) * var(--profile-modal-scale)
+ );
+ --profile-modal-padding-block-end: calc(
+ (var(--space-lg) - var(--space-sm)) * var(--profile-modal-scale)
+ );
+ --profile-modal-nav-gap: calc(var(--space-xs) * var(--profile-modal-scale));
+ }
+
+ .profile-modal__content {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ block-size: 100%;
+ min-block-size: 0;
+ transform: scale(var(--profile-modal-scale));
+ transform-origin: top center;
+ }
+
+ .profile-modal__active-profile {
+ @apply focus-ring flex flex-wrap items-center gap-4 p-4;
+ }
+
+ .profile-modal__active-details {
+ display: flex;
+ flex: 1 1 var(--profile-modal-active-min-width);
+ flex-direction: column;
+ gap: var(--space-2xs);
+ min-inline-size: 0;
+ }
+
+ .profile-modal__active-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-xs);
+ }
+
+ .profile-modal__channel-link {
+ margin-inline-start: auto;
+ align-self: center;
+ white-space: nowrap;
+ }
+
+ .profile-hashtag-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-xs);
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .profile-hashtag-item {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-3xs);
+ padding-block: var(--space-3xs);
+ padding-inline: var(--space-sm);
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--color-border-translucent);
+ background-color: var(--color-panel);
+ color: var(--color-text);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
+ line-height: var(--font-lineheight-tight);
+ }
+
+ .profile-hashtag-remove {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ inline-size: var(--space-md);
+ block-size: var(--space-md);
+ border-radius: var(--radius-full);
+ color: var(--color-text-muted);
+ background: transparent;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ }
+
+ .profile-hashtag-remove:hover {
+ color: var(--color-text);
+ }
+
+ .profile-modal__remove-button {
+ @apply border-2;
+ }
+
+ .profile-modal__remove-button:focus-visible {
+ --tw-ring-color: var(--color-critical-strong);
+ }
+
+ .profile-modal__add-profile {
+ --tw-ring-color: var(--color-ring-alert);
+ @apply focus-ring relative flex w-full items-center justify-start gap-4 rounded-xl px-5 py-4 text-left text-text transition duration-base ease-in-out;
+ border: var(--outline-thick-width) solid var(--color-ring-alert);
+ background-color: var(--surface-panel-hover);
+ }
+
+ .profile-modal__add-profile:hover {
+ background-color: color-mix(
+ in srgb,
+ var(--surface-panel-hover) 88%,
+ var(--color-ring-alert) 12%
+ );
+ }
+
+ .profile-modal__add-profile:focus-visible {
+ background-color: color-mix(
+ in srgb,
+ var(--surface-panel-hover) 80%,
+ var(--color-ring-alert) 20%
+ );
+ }
+
+ .profile-modal__add-profile-icon {
+ @apply flex h-10 w-10 items-center justify-center rounded-full;
+ background-color: color-mix(
+ in srgb,
+ var(--color-ring-alert) 18%,
+ var(--surface-panel)
+ );
+ color: var(--color-ring-alert);
+ }
+
+ .profile-modal__body {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ gap: var(--profile-modal-gap);
+ inline-size: 100%;
+ min-block-size: 0;
+ overflow: hidden;
+ overflow-x: hidden;
+ padding-block-start: var(--profile-modal-padding-block-start);
+ padding-block-end: var(--profile-modal-padding-block-end);
+ padding-inline: var(--profile-modal-padding-inline);
+ }
+
+ .profile-modal__layout {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ gap: var(--profile-modal-gap);
+ inline-size: 100%;
+ min-block-size: 0;
+ }
+
+ .profile-modal__header {
+ align-items: center;
+ }
+
+ .profile-modal__header-title {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ }
+
+ .profile-modal__menu {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ }
+
+ .profile-modal__pane-wrapper {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ min-block-size: 0;
+ }
+
+ .profile-modal__nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--profile-modal-nav-gap);
+ align-self: flex-start;
+ overflow-x: visible;
+ }
+
+ .profile-nav__unread-dot {
+ position: absolute;
+ top: 50%;
+ left: -6px;
+ right: auto;
+ width: var(--space-sm);
+ height: var(--space-sm);
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--surface-panel);
+ background-color: var(--status-danger);
+ display: none;
+ pointer-events: none;
+ transform: translateY(-50%);
+ }
+
+ .profile-nav__unread-dot.is-visible {
+ display: block;
+ }
+
+ .profile-modal__panes {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ block-size: 100%;
+ min-block-size: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-inline-end: var(--profile-modal-scrollbar-offset);
+ scrollbar-gutter: stable;
+ }
+
+ .profile-pane {
+ display: flex;
+ flex-direction: column;
+ min-block-size: auto;
+ overflow-x: hidden;
+ }
+
+ /* Specific override for messages pane to prevent parent scrolling on desktop */
+ @media (min-width: theme("screens.md")) {
+ #profilePaneMessages {
+ height: 100%;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ #dmAppShellMount {
+ height: 100%;
+ min-height: 0;
+ }
+ }
+
+ .profile-pane.hidden {
+ display: none !important;
+ }
+
+ @supports not (scrollbar-gutter: stable) {
+ .profile-modal__panes {
+ padding-inline-end: calc(
+ var(--profile-modal-scrollbar-offset) + var(--space-2xs)
+ );
+ }
+ }
+
+ @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+ .profile-modal__layout[data-mobile-view="menu"]
+ .profile-modal__pane-wrapper {
+ display: none;
+ }
+
+ .profile-modal__layout[data-mobile-view="pane"] .profile-modal__menu {
+ display: none;
+ }
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .profile-modal {
+ max-block-size: var(--modal-shell-max-height);
+ }
+
+ .profile-modal__body {
+ gap: calc(var(--profile-modal-gap) + var(--space-2xs));
+ padding-inline: calc(
+ var(--profile-modal-padding-inline) + var(--space-xs)
+ );
+ }
+
+ .profile-modal__layout {
+ display: grid;
+ align-items: stretch;
+ block-size: 100%;
+ gap: calc(var(--profile-modal-gap) + var(--space-2xs));
+ grid-template-columns:
+ minmax(
+ var(--profile-modal-nav-min-width),
+ var(--profile-modal-nav-max-width)
+ )
+ minmax(0, 1fr);
+ grid-auto-rows: minmax(0, 1fr);
+ }
+
+ .profile-modal__nav {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ gap: var(--profile-modal-nav-gap);
+ justify-self: start;
+ inline-size: var(--profile-modal-nav-max-width);
+ min-inline-size: var(--profile-modal-nav-min-width);
+ }
+
+ .profile-modal__pane-wrapper {
+ block-size: 100%;
+ }
+ }
+
+ /* Torrent helper classes */
+ .beacon-hidden-download,
+ [data-beacon-hidden-download],
+ .torrent-download-anchor {
+ display: none !important;
+ }
+
+ .beacon-clipboard-offscreen,
+ [data-beacon-clipboard-state="offscreen"],
+ [data-beacon-clipboard="offscreen"],
+ .torrent-clipboard-textarea {
+ position: fixed;
+ top: 0;
+ left: var(--offscreen-offset);
+ opacity: 0;
+ width: 0;
+ height: 0;
+ pointer-events: none;
+ }
+
+ .beacon-toast-motion,
+ .torrent-toast-motion {
+ transition-property: opacity, transform;
+ will-change: opacity, transform;
+ opacity: 0;
+ transform: translateY(var(--toast-translate));
+ }
+
+ .beacon-toast-motion[data-beacon-motion="enter"],
+ .beacon-toast-motion[data-beacon-motion="show"],
+ .torrent-toast-motion[data-beacon-motion="enter"],
+ .torrent-toast-motion[data-beacon-motion="show"] {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .beacon-toast-motion[data-beacon-motion="exit"],
+ .torrent-toast-motion[data-beacon-motion="exit"] {
+ opacity: 0;
+ transform: translateY(var(--toast-translate));
+ }
+
+ .torrent-toast {
+ @apply pointer-events-auto w-full max-w-md rounded-lg px-4 py-3 text-sm font-medium tracking-tight shadow-lg ring-1 ring-inset;
+ }
+
+ .torrent-toast--info {
+ @apply border border-border-translucent bg-surface text-text;
+ }
+
+ .torrent-toast--success {
+ @apply border border-info border-opacity-60 bg-info text-white;
+ }
+
+ .torrent-toast--error {
+ @apply border border-critical border-opacity-60 bg-critical text-white;
+ }
+
+ .torrent-toast--warn {
+ @apply border border-warning-strong border-opacity-70 bg-warning-strong text-warning-strong;
+ }
+
+ .profile-switcher {
+ @apply card flex flex-col gap-lg;
+ }
+
+ .profile-switcher__badge {
+ @apply badge self-start;
+ }
+
+ .profile-switcher__header {
+ @apply flex flex-col gap-sm sm:flex-row sm:items-center sm:justify-between;
+ }
+
+ .profile-switcher__intro {
+ @apply flex flex-col gap-2xs;
+ }
+
+ .profile-switcher__title {
+ @apply text-base font-semibold text-text;
+ }
+
+ .profile-switcher__subtitle {
+ @apply text-sm text-muted;
+ }
+
+ .profile-switcher__list {
+ @apply flex flex-col gap-md;
+ }
+
+ .profile-switcher__helper {
+ @apply text-xs text-muted;
+ }
+
+ .profile-card {
+ @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-accent focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
+ }
+
+ .profile-card--active {
+ @apply border-accent border-opacity-60 shadow-lg;
+ }
+
+ .profile-card__avatar {
+ @apply flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-full border border-border border-opacity-30 bg-surface;
+ }
+
+ .profile-card__avatar img {
+ @apply h-full w-full rounded-full object-cover;
+ }
+
+ .profile-card--active .profile-card__avatar {
+ @apply border-accent border-opacity-70 ring-2;
+ --tw-ring-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
+ --tw-ring-opacity: 1;
+ }
+
+ .profile-card__meta {
+ @apply flex min-w-0 flex-1 flex-col gap-sm;
+ }
+
+ .profile-card__topline {
+ @apply flex w-full flex-wrap items-center gap-sm sm:justify-between;
+ }
+
+ .profile-card__label {
+ @apply text-xs font-semibold uppercase tracking-wide text-accent;
+ }
+
+ .profile-card__name {
+ @apply truncate text-sm font-semibold text-text;
+ }
+
+ .profile-card__npub {
+ @apply break-all font-mono text-xs text-muted;
+ }
+
+ .profile-card__action,
+ .profile-nav-button {
+ @apply btn-ghost ml-auto flex-shrink-0 px-3 py-1 text-xs;
+ }
+
+ .profile-switcher__add {
+ --profile-switcher-add-hover-bg: color-mix(
+ in srgb,
+ var(--color-accent) 14%,
+ transparent
+ );
+
+ @apply card flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-accent hover:border-opacity-60 hover:text-text focus-visible:border-accent focus-visible:border-opacity-60;
+ }
+
+ .profile-switcher__add:hover,
+ .profile-switcher__add:focus-visible {
+ background-color: var(--profile-switcher-add-hover-bg);
+ }
+
+ .profile-switcher__addAvatar {
+ @apply flex h-12 w-12 flex-none items-center justify-center rounded-full border border-dashed border-current bg-surface;
+ }
+
+ .profile-switcher__addAvatar svg {
+ @apply h-5 w-5;
+ }
+
+ .profile-switcher__addCopy {
+ @apply flex flex-col gap-1 text-left;
+ }
+
+ .profile-switcher__addTitle {
+ @apply text-sm font-semibold text-inherit;
+ }
+
+ .profile-switcher__addHint {
+ @apply text-xs text-muted;
+ }
+
+ .watch-history-grid {
+ @apply flex w-full flex-col gap-5 py-6 sm:gap-6;
+ }
+
+ .watch-history-grid.watch-history-grid--modal {
+ @apply gap-5 py-0 sm:gap-6;
+ }
+
+ .watch-history-card {
+ @apply card flex flex-wrap items-stretch gap-5 p-4 transition duration-base ease-out hover:-translate-y-0.5 hover:shadow-lg sm:gap-6 sm:p-5;
+ }
+
+ .watch-history-card--private {
+ @apply border-info border-opacity-60;
+ }
+
+ .watch-history-card__primary {
+ @apply flex min-w-0 flex-1 flex-col items-stretch gap-4 sm:flex-row;
+ }
+
+ .watch-history-card__thumbnail {
+ @apply block w-56 max-w-full flex-none text-text no-underline;
+ }
+
+ .watch-history-card__thumbnailInner {
+ @apply aspect-video w-full overflow-hidden rounded-lg bg-surface;
+ }
+
+ .watch-history-card__thumbnailInner img {
+ @apply h-full w-full object-cover;
+ }
+
+ .watch-history-card [data-thumbnail-state="blurred"] img,
+ .watch-history-card [data-visual-state="blurred"] img {
+ @apply transition duration-base ease-in-out;
+ filter: blur(var(--blur-thumbnail-blur));
+ transform: scale(1.05);
+ }
+
+ .watch-history-card__details {
+ @apply flex min-w-0 flex-1 flex-col justify-center gap-sm;
+ }
+
+ .watch-history-card__title {
+ @apply cursor-pointer text-lg font-semibold leading-snug text-text transition duration-base ease-out;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ .watch-history-card__title:hover,
+ .watch-history-card__title:focus {
+ @apply text-accent;
+ }
+
+ .watch-history-card__created {
+ @apply text-sm text-muted;
+ }
+
+ .watch-history-card__meta {
+ @apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-56 sm:flex-none sm:basis-64;
+ }
+
+ .watch-history-card__watched {
+ @apply text-sm text-border-subtle;
+ }
+
+ .watch-history-card__creator {
+ @apply flex items-center gap-3;
+ }
+
+ .watch-history-card__creatorAvatar {
+ @apply flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-opacity-50;
+ }
+
+ .watch-history-card__creatorAvatar:hover,
+ .watch-history-card__creatorAvatar:focus-visible {
+ --tw-ring-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
+ }
+
+ .watch-history-card__creatorAvatar img {
+ @apply h-full w-full rounded-full object-cover;
+ }
+
+ .watch-history-card__creatorName {
+ @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-accent focus-visible:text-accent;
+ }
+
+ .watch-history-card__actions {
+ @apply flex flex-wrap items-center gap-3;
+ }
+
+ .watch-history-card__action {
+ @apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-text focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-text;
+ }
+
+ .watch-history-card__action--primary {
+ @apply bg-accent-strong text-white hover:bg-accent-pressed focus-visible:bg-accent-pressed;
+ }
+
+ .watch-history-card__action--danger {
+ @apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong;
+ }
+
+ .watch-history-card__moderation {
+ @apply mt-sm flex flex-wrap items-center gap-sm;
+ }
+
+ .watch-history-card__hidden {
+ @apply mt-md rounded-lg border border-dashed border-border bg-overlay-panel-soft text-sm text-text;
+ }
+
+ .watch-history-card__hidden .moderation-badge {
+ @apply self-start;
+ }
+
+ /* Ensure the video modal avatar respects the blur state */
+ #playerModal .channel-card__avatar img[data-visual-state="blurred"] {
+ @apply transition duration-base ease-in-out;
+ filter: blur(var(--blur-thumbnail-blur));
+ transform: scale(1.05);
+ }
+
+ /* Override moderation badge text color inside the modal bar for better contrast in all themes */
+ #playerModal .video-modal__moderation-bar .moderation-badge {
+ --text-status-neutral-on: var(--color-text);
+ --text-status-warning-on: var(--color-warning-on);
+ }
+
+ #playerModal
+ .video-modal__moderation-bar
+ .moderation-badge[data-variant="neutral"] {
+ color: var(--color-text);
+ }
+}
+
+@layer components {
+ .container {
+ max-width: var(--layout-docs-max-width);
+ margin: 0 auto;
+ padding: var(--space-md);
+ }
+
+ .docs-popover-scenarios__scroll-spacer {
+ height: var(--docs-popover-scroll-height);
+ }
+
+ .qr-code__table {
+ border: 0;
+ border-collapse: collapse;
+ margin: var(--qr-code-table-margin, 0);
+ }
+
+ .qr-code__cell {
+ border: 0;
+ border-collapse: collapse;
+ padding: 0;
+ margin: 0;
+ width: var(--qr-code-cell-width);
+ height: var(--qr-code-cell-height);
+ background-color: var(--qr-code-color-light);
+ }
+
+ .qr-code__cell--dark {
+ background-color: var(--qr-code-color-dark);
+ }
+
+ .qr-code__container[data-qr-code-mode="image"] .qr-code__canvas {
+ display: none;
+ }
+
+ .qr-code__container[data-qr-code-mode="image"] .qr-code__image {
+ display: block;
+ }
+
+ .qr-code__container[data-qr-code-mode="canvas"] .qr-code__canvas {
+ display: block;
+ }
+
+ .qr-code__container[data-qr-code-mode="canvas"] .qr-code__image {
+ display: none;
+ }
+
+ .fade-in {
+ opacity: 0;
+ animation: interface-fade-in 280ms ease-out forwards;
+ animation-delay: var(--fade-in-delay, 0ms);
+ }
+
+ .fade-in-delay-100 {
+ --fade-in-delay: 100ms;
+ }
+
+ .fade-in-delay-200 {
+ --fade-in-delay: 200ms;
+ }
+
+ .fade-in-delay-300 {
+ --fade-in-delay: 300ms;
+ }
+
+ .fade-in-delay-400 {
+ --fade-in-delay: 400ms;
+ }
+
+ .card[data-motion="enter"] {
+ opacity: 0;
+ animation: card-motion-enter 220ms ease-out forwards;
+ }
+
+ .icon-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--icon-size-lg);
+ height: var(--icon-size-lg);
+ min-width: var(--icon-size-lg);
+ min-height: var(--icon-size-lg);
+ flex: 0 0 var(--icon-size-lg);
+ line-height: 0;
+ background-color: var(--color-neutral-700);
+ color: var(--color-white);
+ border: none;
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ transition:
+ background-color 200ms ease,
+ box-shadow 200ms ease;
+ }
+
+ .icon-button:hover {
+ background-color: var(--color-neutral-600);
+ }
+
+ .icon-button:focus,
+ .icon-button:active {
+ outline: none;
+ box-shadow: 0 0 0 var(--icon-button-ring-width) var(--color-ring-alert);
+ }
+
+ .icon-image {
+ width: var(--icon-size-md);
+ height: var(--icon-size-md);
+ pointer-events: none;
+ }
+
+ .accent-action-button,
+ .channel-action-button {
+ --accent-action-bg: color-mix(
+ in srgb,
+ var(--surface-overlay-panel) 78%,
+ transparent
+ );
+ --accent-action-border: color-mix(
+ in srgb,
+ var(--border-overlay) 92%,
+ transparent
+ );
+ --accent-action-bg-hover: color-mix(
+ in srgb,
+ var(--color-accent) 22%,
+ var(--surface-overlay-panel)
+ );
+ --accent-action-ring: color-mix(
+ in srgb,
+ var(--color-accent) 48%,
+ transparent
+ );
+ --accent-action-bg-active: color-mix(
+ in srgb,
+ var(--color-accent-pressed) 28%,
+ var(--surface-overlay-panel)
+ );
+
+ color: var(--color-text);
+ background-color: var(--accent-action-bg);
+ border-color: var(--accent-action-border);
+ border-style: solid;
+ border-width: var(--border-width-hairline);
+ }
+
+ .accent-action-button:hover,
+ .accent-action-button:focus-visible,
+ .channel-action-button:hover,
+ .channel-action-button:focus-visible {
+ color: var(--color-accent-strong);
+ background-color: var(--accent-action-bg-hover);
+ }
+
+ .accent-action-button:focus,
+ .accent-action-button:focus-visible,
+ .channel-action-button:focus,
+ .channel-action-button:focus-visible {
+ box-shadow: 0 0 0 var(--icon-button-ring-width) var(--accent-action-ring);
+ }
+
+ .accent-action-button:active,
+ .channel-action-button:active {
+ color: var(--color-accent-pressed);
+ background-color: var(--accent-action-bg-active);
+ }
+
+ .modal-nav .icon-button {
+ box-shadow: none;
+ padding: 0;
+ gap: 0;
+ width: var(--icon-size-lg);
+ height: var(--icon-size-lg);
+ min-width: var(--icon-size-lg);
+ min-height: var(--icon-size-lg);
+ }
+
+ .modal-nav
+ .icon-button:not(.accent-action-button):not(.channel-action-button) {
+ border: none;
+ }
+
+ .modal-meta {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ }
+
+ .modal-view-count {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-2xs);
+ font-size: var(--font-size-sm);
+ line-height: var(--space-md-plus);
+ color: var(--color-muted-alt);
+ white-space: nowrap;
+ }
+
+ .view-count-text {
+ white-space: nowrap;
+ color: var(--color-muted-strong);
+ }
+
+ .progress-bar {
+ width: 100%;
+ height: var(--modal-progress-height);
+ border-radius: var(--radius-full);
+ background-color: var(--color-border-translucent);
+ overflow: hidden;
+ }
+
+ .progress-bar-fill {
+ width: 0;
+ height: 100%;
+ border-radius: inherit;
+ background: linear-gradient(
+ 90deg,
+ var(--color-info-strong),
+ var(--color-info)
+ );
+ transition: width 240ms ease;
+ }
+
+ .ratio-16-9 {
+ position: relative;
+ width: 100%;
+ padding-top: 56.25%;
+ background-color: var(--color-card);
+ }
+
+ .ratio-16-9 > img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ #modalContainer {
+ position: fixed;
+ inset: 0;
+ z-index: var(--z-modal-root);
+ pointer-events: none;
+ isolation: isolate;
+ }
+
+ #modalContainer > * {
+ pointer-events: auto;
+ }
+
+ #modalContainer > [id$="Modal"]:not(#playerModal) {
+ z-index: var(--z-modal-root);
+ }
+
+ #modalContainer > [id$="Modal"]:not(#playerModal) > .bv-modal-backdrop {
+ z-index: var(--z-modal-overlay);
+ }
+
+ #modalContainer > [id$="Modal"]:not(#playerModal) .bv-modal__panel {
+ z-index: var(--z-modal-content);
+ }
+
+ #modalContainer > #profileModal,
+ #profileModal[data-modal-stack="top"] {
+ z-index: var(--z-modal-top-root);
+ }
+
+ #modalContainer > #profileModal > .bv-modal-backdrop,
+ #profileModal[data-modal-stack="top"] > .bv-modal-backdrop {
+ z-index: var(--z-modal-top-overlay);
+ }
+
+ #modalContainer > #profileModal .bv-modal__panel,
+ #profileModal[data-modal-stack="top"] .bv-modal__panel {
+ z-index: var(--z-modal-top-content);
+ }
+
+ #modalContainer > #eventDetailsModal {
+ z-index: var(--z-modal-top-root);
+ }
+
+ #modalContainer > #eventDetailsModal > .bv-modal-backdrop {
+ z-index: var(--z-modal-top-overlay);
+ }
+
+ #modalContainer > #eventDetailsModal .bv-modal__panel {
+ z-index: var(--z-modal-top-content);
+ }
+
+ #shareNostrModal {
+ z-index: var(--z-modal-peak-root) !important;
+ }
+
+ #shareNostrModal > .bv-modal-backdrop {
+ z-index: var(--z-modal-peak-overlay) !important;
+ }
+
+ #shareNostrModal .bv-modal__panel {
+ z-index: var(--z-modal-peak-content) !important;
+ }
+
+ .bv-modal[data-nested-modal-active="true"] {
+ pointer-events: none;
+ visibility: hidden;
+ }
+
+ #modalContainer > #loginModal {
+ z-index: var(--z-modal-peak-root);
+ }
+
+ #modalContainer > #loginModal > .bv-modal-backdrop {
+ z-index: var(--z-modal-peak-overlay);
+ }
+
+ #modalContainer > #loginModal .bv-modal__panel {
+ z-index: var(--z-modal-peak-content);
+ }
+
+ #modalContainer > #playerModal {
+ z-index: var(--z-modal-player);
+ }
+
+ #modalContainer > #playerModal .player-modal__container,
+ #modalContainer > #playerModal .player-modal__content {
+ z-index: var(--z-modal-content);
+ }
+
+ .modal-always-on-top {
+ z-index: var(--z-modal-always-top) !important;
+ }
+
+ #playerModal {
+ position: fixed;
+ inset: 0;
+ z-index: var(--z-modal-player);
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: flex-start;
+ width: 100vw;
+ height: 100vh;
+ padding: 0;
+ background-color: var(--color-surface);
+ color: var(--color-subtle-text);
+ --player-modal-inline-max: var(--layout-player-max-width);
+ --player-modal-inline-padding: clamp(
+ var(--space-md-plus),
+ 4vw,
+ var(--space-2xl)
+ );
+ overflow-x: hidden;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ #modalVideo {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ background-color: var(--color-black);
+ }
+
+ .notification-portal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: var(--z-overlay-toast);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-md);
+ padding: calc(var(--space-xl) + env(safe-area-inset-top)) var(--space-lg)
+ var(--space-lg);
+ pointer-events: none;
+ opacity: 0;
+ transform: translateY(var(--toast-translate));
+ transition:
+ transform var(--motion-duration-base) var(--motion-ease-out),
+ opacity var(--motion-duration-base) var(--motion-ease-out);
+ }
+
+ @media (min-width: theme("screens.sm")) {
+ .notification-portal {
+ padding-inline: var(--space-xl);
+ }
+ }
+
+ .notification-portal:has(.notification-banner:not(.hidden)) {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .notification-portal--active {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .notification-banner,
+ .torrent-toast {
+ --notify-accent: var(--notification-banner-accent);
+ --notify-accent-strong: var(--notification-banner-accent-strong);
+ --notify-border: var(--notification-banner-border);
+ --notify-background: var(--notification-banner-background);
+ --notify-foreground: var(--notification-banner-text);
+
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ width: min(var(--notification-banner-max-inline), 100%);
+ padding: var(--space-md) var(--space-xl);
+ border-radius: var(--radius-xl);
+ border: var(--border-width-hairline) solid var(--notify-border);
+ background: var(--notify-background);
+ color: var(--notify-foreground);
+ box-shadow: 0 var(--shadow-notification-offset-y)
+ var(--shadow-notification-blur) var(--color-shadow-notification);
+ backdrop-filter: blur(var(--overlay-backdrop-blur));
+ pointer-events: auto;
+ isolation: isolate;
+ @apply text-sm font-semibold leading-snug;
+ transition:
+ transform var(--motion-duration-base) var(--motion-ease-out),
+ opacity var(--motion-duration-base) var(--motion-ease-out);
+ }
+
+ .notification-banner::before,
+ .torrent-toast::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: linear-gradient(
+ 135deg,
+ var(--notify-accent) 0%,
+ var(--notify-accent-strong) 100%
+ );
+ opacity: 0.18;
+ pointer-events: none;
+ }
+
+ .notification-banner > *,
+ .torrent-toast > * {
+ position: relative;
+ z-index: 1;
+ }
+
+ .notification-dismiss {
+ @apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent transition duration-base ease-out;
+ color: inherit;
+ opacity: 0.75;
+ background-color: var(--notify-dismiss-background);
+ }
+
+ .notification-dismiss:hover,
+ .notification-dismiss:focus-visible {
+ opacity: 1;
+ background-color: var(--notify-dismiss-background-hover);
+ }
+
+ .notification-dismiss svg {
+ @apply h-4 w-4;
+ }
+
+ .notification-banner:not(.hidden) {
+ animation: notification-slide-in var(--motion-duration-base)
+ var(--motion-ease-out);
+ }
+
+ .notification-banner--critical,
+ .torrent-toast--error {
+ --notify-accent: var(--notification-banner-critical-accent);
+ --notify-accent-strong: var(--notification-banner-critical-accent-strong);
+ --notify-border: var(--notification-banner-critical-border);
+ --notify-background: var(--notification-banner-critical-background);
+ --notify-foreground: var(--notification-banner-critical-text);
+ }
+
+ .notification-banner--success,
+ .torrent-toast--success {
+ --notify-accent: var(--notification-banner-success-accent);
+ --notify-accent-strong: var(--notification-banner-success-accent-strong);
+ --notify-border: var(--notification-banner-success-border);
+ --notify-background: var(--notification-banner-success-background);
+ --notify-foreground: var(--notification-banner-success-text);
+ }
+
+ .notification-banner--info,
+ .torrent-toast--info {
+ --notify-accent: var(--notification-banner-info-accent);
+ --notify-accent-strong: var(--notification-banner-info-accent-strong);
+ --notify-border: var(--notification-banner-info-border);
+ --notify-background: var(--notification-banner-info-background);
+ --notify-foreground: var(--notification-banner-info-text);
+ }
+
+ .notification-banner--warning,
+ .torrent-toast--warn {
+ --notify-accent: var(--notification-banner-warning-accent);
+ --notify-accent-strong: var(--notification-banner-warning-accent-strong);
+ --notify-border: var(--notification-banner-warning-border);
+ --notify-background: var(--notification-banner-warning-background);
+ --notify-foreground: var(--notification-banner-warning-text);
+ }
+
+ .status-banner .status-spinner {
+ animation: spin 1s linear infinite;
+ border: var(--space-3xs) solid var(--color-info-border);
+ border-radius: var(--radius-full);
+ border-top-color: var(--color-info);
+ flex-shrink: 0;
+ height: var(--icon-size-md);
+ width: var(--icon-size-md);
+ }
+
+ .status-banner .status-message {
+ flex: 1 1 auto;
+ }
+
+ @keyframes notification-slide-in {
+ from {
+ opacity: 0;
+ transform: translateY(var(--toast-translate));
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .status-spinner--inline {
+ animation: spin 1s linear infinite;
+ border: var(--space-3xs) solid var(--color-border-info-soft);
+ border-radius: var(--radius-full);
+ border-top-color: var(--color-info);
+ display: inline-block;
+ height: var(--space-md);
+ width: var(--space-md);
+ }
+
+ body.iframe-form {
+ background-color: transparent;
+ color: var(--color-text);
+ font-family: var(--font-family-sans);
+ margin: var(--space-lg);
+ }
+
+ body.iframe-form .container {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ body.iframe-form .form-container {
+ background-color: var(--color-surface-alt);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-md);
+ color: var(--color-text);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ padding: var(--space-lg);
+ }
+
+ body.iframe-form .form-container > p {
+ margin: 0;
+ }
+
+ body.iframe-form form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ body.iframe-form form > * + * {
+ margin-top: var(--space-sm);
+ }
+
+ body.iframe-form form h1,
+ body.iframe-form form h2 {
+ color: var(--color-text);
+ margin-top: var(--space-md);
+ }
+
+ body.iframe-form label {
+ color: var(--color-subtle-text);
+ display: block;
+ font-weight: 600;
+ margin-top: var(--space-sm);
+ }
+
+ body.iframe-form label + .form-control,
+ body.iframe-form label + .textarea,
+ body.iframe-form label + .select {
+ margin-top: var(--space-xs);
+ }
+
+ body.iframe-form .checkbox-group,
+ body.iframe-form .radio-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+ margin-top: var(--space-xs);
+ }
+
+ body.iframe-form .checkbox-group label,
+ body.iframe-form .radio-group label {
+ align-items: center;
+ color: var(--color-subtle-text);
+ display: inline-flex;
+ font-weight: 500;
+ gap: var(--space-xs);
+ margin: 0;
+ }
+
+ body.iframe-form .checkbox-group input[type="checkbox"],
+ body.iframe-form .radio-group input[type="radio"] {
+ margin: 0;
+ }
+
+ body.iframe-form .radio-group input[type="radio"] {
+ accent-color: var(--color-accent-strong);
+ }
+
+ body.iframe-form button.btn {
+ align-self: flex-start;
+ margin-top: var(--space-md);
+ }
+
+ body.iframe-form #status {
+ background: var(--color-surface);
+ border-radius: var(--radius-sm);
+ box-shadow: inset 0 0 0 var(--border-width-hairline)
+ var(--color-border-translucent);
+ color: var(--color-subtle-text);
+ min-height: calc(var(--space-2xl) + var(--space-xl));
+ padding: var(--space-sm);
+ white-space: pre-wrap;
+ }
+
+ body.iframe-form .status-line {
+ color: var(--color-subtle-text);
+ margin: var(--space-2xs) 0;
+ }
+
+ body.iframe-form .status-line.error {
+ color: var(--color-critical-strong);
+ }
+
+ body.iframe-form .status-line.success {
+ color: var(--color-info-strong);
+ }
+
+ body.iframe-form .status-line.warn {
+ color: var(--color-warning-strong);
+ }
+
+ @media (max-width: theme("screens.sm")) {
+ body.iframe-form {
+ margin: var(--space-md);
+ }
+
+ body.iframe-form .form-container {
+ padding: var(--space-md);
+ }
+ }
+
+ #sidebarContainer {
+ position: relative;
+ overflow: visible;
+ }
+
+ #sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: var(--sidebar-width);
+ min-width: var(--sidebar-width);
+ height: 100vh;
+ height: 100dvh;
+ color: var(--color-text-frosted-strong);
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+ overscroll-behavior-inline: contain;
+ touch-action: pan-y;
+ scrollbar-gutter: stable both-edges;
+ background: transparent;
+ border-right: none;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ transition:
+ width 200ms ease,
+ transform 300ms ease;
+ z-index: var(--z-sidebar);
+ box-shadow: none;
+ isolation: isolate;
+ }
+
+ body.sidebar-collapsed,
+ #sidebar.sidebar-collapsed,
+ #sidebar[data-state="collapsed"],
+ #app.sidebar-collapsed {
+ --sidebar-width: var(--sidebar-width-collapsed);
+ }
+
+ body.sidebar-expanded,
+ #sidebar.sidebar-expanded,
+ #sidebar[data-state="expanded"],
+ #app.sidebar-expanded {
+ --sidebar-width: var(--sidebar-width-expanded);
+ }
+
+ #sidebar .sidebar__inner {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding-block-start: max(
+ var(--space-sidebar-shell-block-start),
+ calc(var(--app-header-centerline) - (var(--sidebar-control-size) / 2))
+ );
+ padding-block-end: var(--space-sidebar-shell-block-end);
+ padding-inline: var(--space-sidebar-shell-inline);
+ width: 100%;
+ border-radius: var(--radius-sidebar-shell);
+ border: none;
+ background: none;
+ box-shadow: none;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ overflow: visible;
+ isolation: isolate;
+ transition: color 200ms ease;
+ }
+
+ .sidebar-scroll {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sidebar-scroll-gap);
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+ flex: 1 1 auto;
+ overflow: visible;
+ }
+
+ .sidebar-panel {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sidebar-panel-gap);
+ padding: var(--space-sidebar-panel-padding-block)
+ var(--space-sidebar-panel-padding-inline);
+ border-radius: var(--radius-sidebar-panel);
+ border: none;
+ background: transparent;
+ box-shadow: none;
+ color: inherit;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ overflow: hidden;
+ isolation: isolate;
+ transition:
+ border-color 200ms ease,
+ box-shadow 220ms ease,
+ background 220ms ease;
+ }
+
+ .sidebar-panel--primary {
+ flex: 1 1 auto;
+ min-height: 0;
+ padding-block-start: 0;
+ }
+
+ .sidebar-panel__header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: var(--space-md);
+ }
+
+ .sidebar-collapse-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--sidebar-control-size);
+ height: var(--sidebar-control-size);
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid
+ var(--color-border-translucent-medium);
+ background: var(--color-surface-tint-subtle);
+ color: inherit;
+ cursor: pointer;
+ transition:
+ background 180ms ease,
+ color 180ms ease,
+ border-color 180ms ease;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ }
+
+ .sidebar-collapse-toggle:hover {
+ background: var(--color-border-translucent);
+ border-color: var(--color-border-translucent-stronger);
+ color: var(--color-text);
+ }
+
+ .sidebar-collapse-toggle:focus-visible {
+ outline: var(--space-3xs) solid var(--color-secondary);
+ outline-offset: var(--space-2xs);
+ }
+
+ .sidebar-collapse-toggle__icon {
+ width: var(--icon-size-sm);
+ height: var(--icon-size-sm);
+ transition: transform 200ms ease;
+ }
+
+ .sidebar-nav {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ opacity: 1;
+ transition: opacity 160ms ease;
+ width: 100%;
+ }
+
+ .sidebar-nav-link {
+ --sidebar-nav-translate-x: 0;
+ --sidebar-nav-link-highlight-opacity: 0;
+ --sidebar-nav-link-highlight-scale: 0.96;
+ display: flex;
+ align-items: center;
+ gap: var(--space-sidebar-footer-gap);
+ padding-block: var(--space-sidebar-nav-padding-block);
+ padding-inline-start: var(--space-sidebar-nav-padding-inline-start);
+ padding-inline-end: var(--space-sidebar-nav-padding-inline-end);
+ min-height: var(--sidebar-control-size);
+ border-radius: var(--radius-sidebar-nav);
+ font-size: var(--font-size-sidebar-nav);
+ font-weight: 600;
+ letter-spacing: 0.015em;
+ color: var(--color-text);
+ text-decoration: none;
+ width: 100%;
+ position: relative;
+ border: var(--border-width-hairline) solid transparent;
+ background: none;
+ box-shadow: none;
+ transform: translateX(var(--sidebar-nav-translate-x));
+ transition:
+ color 180ms ease,
+ border-color 200ms ease,
+ box-shadow 220ms ease,
+ transform 220ms ease;
+ overflow: hidden;
+ isolation: isolate;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ }
+
+ .sidebar-nav-link::before,
+ .sidebar-nav-link::after {
+ content: "";
+ position: absolute;
+ inset: calc(var(--border-width-hairline) * -1);
+ border-radius: inherit;
+ pointer-events: none;
+ transition:
+ opacity 220ms ease,
+ transform 240ms ease;
+ z-index: -1;
+ }
+
+ .sidebar-nav-link::before {
+ background: linear-gradient(
+ 120deg,
+ var(--color-sidebar-accent-start) 0%,
+ var(--color-sidebar-accent-end) 100%
+ );
+ opacity: var(--sidebar-nav-link-highlight-opacity);
+ transform: scale(var(--sidebar-nav-link-highlight-scale));
+ filter: saturate(140%);
+ }
+
+ .sidebar-nav-link::after {
+ background: linear-gradient(
+ 105deg,
+ var(--color-sidebar-hover) 0%,
+ transparent 75%
+ );
+ opacity: 0.22;
+ mix-blend-mode: screen;
+ z-index: -2;
+ }
+
+ .sidebar-nav-link:hover,
+ .sidebar-nav-link:focus-visible {
+ --sidebar-nav-link-highlight-opacity: 1;
+ --sidebar-nav-link-highlight-scale: 1.02;
+ --sidebar-nav-translate-x: var(--space-sidebar-nav-translate);
+ color: var(--color-white);
+ border-color: var(--color-sidebar-hover-strong);
+ box-shadow:
+ 0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),
+ var(--shadow-sidebar-accent);
+ }
+
+ .sidebar-nav-link:focus-visible {
+ outline: none;
+ box-shadow: var(--shadow-sidebar-focus-ring), var(--shadow-sidebar-accent);
+ }
+
+ .sidebar-nav-link:hover::after,
+ .sidebar-nav-link:focus-visible::after {
+ opacity: 0.35;
+ }
+
+ .sidebar-nav-link--sub {
+ font-size: var(--font-size-sidebar-subnav);
+ font-weight: 500;
+ color: var(--color-sidebar-text-muted);
+ padding-block: var(--space-sidebar-subnav-padding-block);
+ letter-spacing: 0.02em;
+ --sidebar-nav-link-highlight-opacity: 0.25;
+ --sidebar-nav-link-highlight-scale: 1;
+ }
+
+ .sidebar-icon {
+ width: var(--space-lg);
+ height: var(--space-lg);
+ min-width: var(--space-lg);
+ min-height: var(--space-lg);
+ flex-shrink: 0;
+ display: block;
+ filter: var(--sidebar-icon-filter);
+ transition: filter 180ms ease;
+ }
+
+ .sidebar-footer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sidebar-footer-gap);
+ margin-top: auto;
+ position: relative;
+ z-index: 2;
+ }
+
+ .sidebar-dropup-trigger {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-sidebar-footer-gap);
+ width: 100%;
+ padding-block: var(--space-sidebar-trigger-padding-block);
+ padding-inline-start: var(--space-sidebar-nav-padding-inline-start);
+ padding-inline-end: var(--space-sidebar-nav-padding-inline-end);
+ min-height: var(--sidebar-control-size);
+ border-radius: var(--radius-sidebar-nav);
+ border: var(--border-width-hairline) solid transparent;
+ background: none;
+ color: var(--color-text);
+ font-size: var(--font-size-sidebar-trigger);
+ font-weight: 600;
+ cursor: pointer;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ overflow: hidden;
+ isolation: isolate;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ box-shadow: none;
+ transition:
+ border-color 200ms ease,
+ color 200ms ease,
+ box-shadow 220ms ease;
+ }
+
+ .sidebar-dropup-trigger::before {
+ content: "";
+ position: absolute;
+ inset: calc(var(--border-width-hairline) * -1);
+ border-radius: inherit;
+ pointer-events: none;
+ background: linear-gradient(
+ 120deg,
+ var(--color-sidebar-accent-start) 0%,
+ var(--color-sidebar-accent-end) 100%
+ );
+ opacity: 0;
+ transform: scale(0.96);
+ transition:
+ opacity 200ms ease,
+ transform 220ms ease;
+ z-index: -1;
+ filter: saturate(140%);
+ }
+
+ .sidebar-dropup-trigger::after {
+ content: "";
+ position: absolute;
+ inset: calc(var(--border-width-hairline) * -1);
+ border-radius: inherit;
+ pointer-events: none;
+ background: linear-gradient(
+ 110deg,
+ var(--color-sidebar-hover) 0%,
+ transparent 80%
+ );
+ opacity: 0.18;
+ mix-blend-mode: screen;
+ transition: opacity 200ms ease;
+ z-index: -2;
+ }
+
+ .sidebar-dropup-trigger:hover,
+ .sidebar-dropup-trigger:focus-visible {
+ color: var(--color-white);
+ border-color: var(--color-sidebar-hover-strong);
+ box-shadow:
+ 0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),
+ var(--shadow-sidebar-dropup);
+ }
+
+ .sidebar-dropup-trigger:hover::before,
+ .sidebar-dropup-trigger:focus-visible::before {
+ opacity: 1;
+ transform: scale(1.02);
+ }
+
+ .sidebar-dropup-trigger:hover::after,
+ .sidebar-dropup-trigger:focus-visible::after {
+ opacity: 0.35;
+ }
+
+ .sidebar-dropup-trigger:focus-visible {
+ outline: none;
+ box-shadow: var(--shadow-sidebar-focus-ring), var(--shadow-sidebar-dropup);
+ }
+
+ .sidebar-dropup-trigger__glyph {
+ width: var(--icon-size-md);
+ height: var(--icon-size-md);
+ opacity: 0.9;
+ }
+
+ .sidebar-dropup-trigger__chevron {
+ width: var(--icon-size-sm);
+ height: var(--icon-size-sm);
+ transition: transform 180ms ease;
+ }
+
+ .sidebar-dropup-trigger__chevron.is-rotated,
+ .sidebar-dropup-trigger[aria-expanded="true"]
+ .sidebar-dropup-trigger__chevron {
+ transform: rotate(180deg);
+ }
+
+ .sidebar-dropup-panel {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: calc(100% + var(--space-sidebar-popover-offset));
+ border-radius: var(--radius-xl);
+ border: var(--border-width-hairline) solid
+ var(--color-sidebar-border-strong);
+ background: linear-gradient(
+ 160deg,
+ color-mix(in srgb, var(--color-sidebar-surface) 88%, transparent) 0%,
+ color-mix(in srgb, var(--color-sidebar-surface-alt) 68%, transparent) 100%
+ );
+ box-shadow:
+ inset 0 0 0 var(--border-width-fine) var(--color-sidebar-border),
+ var(--shadow-sidebar-panel);
+ padding: var(--space-sidebar-popover-padding-block)
+ var(--space-sidebar-popover-padding-inline);
+ color: var(--color-text-frosted);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transform: translateY(var(--space-sm));
+ transition:
+ opacity 180ms ease,
+ transform 180ms ease,
+ visibility 180ms ease,
+ box-shadow 220ms ease;
+ backdrop-filter: blur(var(--sidebar-panel-backdrop-blur))
+ saturate(var(--sidebar-panel-backdrop-saturation));
+ -webkit-backdrop-filter: blur(var(--sidebar-panel-backdrop-blur))
+ saturate(var(--sidebar-panel-backdrop-saturation));
+ z-index: 5;
+ isolation: isolate;
+ }
+
+ .sidebar-dropup-panel[data-state="expanded"] {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+
+ .sidebar-dropup-panel__inner {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sidebar-popover-gap);
+ width: 100%;
+ padding-inline-end: var(--space-sidebar-dropup-scroll-reserve);
+ max-height: var(--sidebar-dropup-max-height);
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-gutter: stable both-edges;
+ }
+
+ .sidebar-dropup-panel__inner.is-measuring {
+ position: absolute;
+ width: max-content;
+ max-width: none;
+ visibility: hidden;
+ pointer-events: none;
+ left: var(--offscreen-offset);
+ right: auto;
+ top: auto;
+ bottom: auto;
+ }
+
+ .sidebar-dropup-measure {
+ position: absolute;
+ visibility: hidden;
+ pointer-events: none;
+ height: 0;
+ overflow: hidden;
+ }
+
+ .sidebar-dropup-panel__inner > * {
+ width: 100%;
+ min-width: 0;
+ }
+
+ #sidebar[data-footer-state="expanded"] .sidebar-nav {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ #sidebar[data-footer-state="collapsed"] .sidebar-nav {
+ opacity: 1;
+ }
+
+ .sidebar-loading-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: var(--space-2xl) 0;
+ width: 100%;
+ grid-column: 1 / -1;
+ }
+
+ .sidebar-loading-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ color: var(--color-muted-strong);
+ font-size: var(--font-size-sm);
+ font-weight: 500;
+ letter-spacing: 0.01em;
+ }
+
+ .sidebar-loading-text {
+ white-space: nowrap;
+ }
+
+ #app {
+ box-sizing: border-box;
+ transition:
+ margin-left 200ms ease,
+ width 200ms ease,
+ max-width 200ms ease;
+ }
+
+ #app[data-sidebar-state="collapsed"] {
+ margin-left: calc(
+ var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
+ );
+ width: calc(
+ 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+ );
+ max-width: calc(
+ 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+ );
+ }
+
+ #app[data-sidebar-state="expanded"] {
+ margin-left: calc(
+ var(--sidebar-width-expanded) + var(--sidebar-content-gap)
+ );
+ width: calc(
+ 100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
+ );
+ max-width: calc(
+ 100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
+ );
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-nav-link,
+ #sidebar.sidebar-collapsed .sidebar-nav-link {
+ justify-content: center;
+ width: var(--sidebar-control-size);
+ padding: 0;
+ margin-inline: auto;
+ border-radius: var(--radius-full);
+ --sidebar-nav-translate-x: 0;
+ --sidebar-nav-link-highlight-scale: 1;
+ }
+
+ body.sidebar-expanded #sidebar .sidebar-nav-link,
+ #sidebar.sidebar-expanded .sidebar-nav-link {
+ justify-content: flex-start;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-text,
+ #sidebar.sidebar-collapsed .sidebar-text {
+ display: none;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar__inner,
+ #sidebar.sidebar-collapsed .sidebar__inner {
+ padding-inline: var(--space-2xs);
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-panel,
+ #sidebar.sidebar-collapsed .sidebar-panel {
+ padding-inline: calc(var(--space-3xs) * 3);
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-panel__header,
+ #sidebar.sidebar-collapsed .sidebar-panel__header {
+ justify-content: center;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-collapse-toggle,
+ #sidebar.sidebar-collapsed .sidebar-collapse-toggle {
+ margin-inline: auto;
+ }
+
+ #sidebar .sidebar-toggle-icon--rotated {
+ transform: rotate(180deg);
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
+ #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
+ transform: rotate(0deg);
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-dropup-trigger,
+ #sidebar.sidebar-collapsed .sidebar-dropup-trigger {
+ justify-content: center;
+ width: var(--sidebar-control-size);
+ height: var(--sidebar-control-size);
+ padding: 0;
+ margin-inline: auto;
+ border-radius: var(--radius-full);
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,
+ #sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text {
+ display: none;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
+ display: none;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph,
+ #sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph {
+ margin: 0;
+ }
+
+ body.sidebar-collapsed #sidebar .sidebar-nav-link:hover,
+ #sidebar.sidebar-collapsed .sidebar-nav-link:hover,
+ body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,
+ #sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible {
+ --sidebar-nav-translate-x: 0;
+ }
+
+ @media (min-width: theme("screens.md")) {
+ #sidebar {
+ transform: translateX(0) !important;
+ width: var(--sidebar-width);
+ overflow: visible;
+ }
+
+ #app[data-sidebar-state="collapsed"] {
+ margin-left: calc(
+ var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
+ );
+ width: calc(
+ 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+ );
+ max-width: calc(
+ 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+ );
+ }
+
+ #app[data-sidebar-state="expanded"] {
+ margin-left: max(
+ calc(var(--sidebar-width-expanded-base) + var(--sidebar-content-gap)),
+ calc(var(--sidebar-dropup-content-width) + var(--sidebar-content-gap))
+ );
+ width: min(
+ calc(
+ 100vw - var(--sidebar-width-expanded-base) -
+ var(--sidebar-content-gap)
+ ),
+ calc(
+ 100vw - var(--sidebar-dropup-content-width) -
+ var(--sidebar-content-gap)
+ )
+ );
+ max-width: min(
+ calc(
+ 100vw - var(--sidebar-width-expanded-base) -
+ var(--sidebar-content-gap)
+ ),
+ calc(
+ 100vw - var(--sidebar-dropup-content-width) -
+ var(--sidebar-content-gap)
+ )
+ );
+ }
+ }
+
+ @keyframes card-motion-enter {
+ from {
+ opacity: 0;
+ transform: translateY(var(--motion-card-enter-translate));
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes video-thumbnail-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes interface-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(var(--motion-fade-in-translate));
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+ }
+}
+
+@layer utilities {
+ @media (max-width: theme("screens.compact")) {
+ .u-max-400-flex-wrap {
+ flex-wrap: wrap;
+ }
+
+ .u-max-400-gap-y-sm {
+ row-gap: var(--space-sm);
+ }
+
+ .u-max-400-gap-y-xs {
+ row-gap: var(--space-xs);
+ }
+
+ .u-max-400-w-full {
+ width: 100%;
+ }
+
+ .u-max-400-justify-between {
+ justify-content: space-between;
+ }
+
+ .u-max-400-ml-0 {
+ margin-left: 0;
+ }
+
+ .u-max-400-px-sm {
+ padding-left: var(--space-sm);
+ padding-right: var(--space-sm);
+ }
+
+ .u-max-400-square-9 {
+ height: var(--space-xl-compact);
+ width: var(--space-xl-compact);
+ min-height: var(--space-xl-compact);
+ min-width: var(--space-xl-compact);
+ }
+ }
+}
+
+@media (max-width: theme("screens.sm")) {
+ .bv-grid-video {
+ gap: var(--space-md);
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ :root {
+ --motion-duration-fast: 0s;
+ --motion-duration-base: 0s;
+ --motion-duration-slow: 0s;
+ --modal-motion-duration: 0s;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-delay: 0s !important;
+ animation-duration: 0s !important;
+ animation-iteration-count: 1 !important;
+ animation-timing-function: linear !important;
+ transition-delay: 0s !important;
+ transition-duration: 0s !important;
+ transition-timing-function: linear !important;
+ }
+
+ .player-modal__similar-card::before {
+ transition: none !important;
+ }
+
+ .btn,
+ .btn-ghost,
+ .card,
+ .card[data-motion="enter"],
+ .fade-in,
+ .icon-button,
+ .menu__item,
+ .modal-nav,
+ .popover-panel,
+ .popover__panel,
+ .progress-bar-fill,
+ .notification-banner,
+ .notification-portal,
+ .torrent-toast,
+ .status-banner .status-spinner,
+ .status-spinner--inline,
+ .video-modal__panel,
+ .watch-history-card,
+ .watch-history-card__creatorAvatar,
+ .watch-history-card__creatorName,
+ .watch-history-card__action,
+ .watch-history-card__title,
+ #app,
+ #playerModal .player-modal__content,
+ #sidebar,
+ .sidebar-collapse-toggle,
+ .sidebar-collapse-toggle__icon,
+ .sidebar-dropup-panel,
+ .sidebar-dropup-trigger,
+ .sidebar-dropup-trigger__chevron,
+ .sidebar-nav,
+ .sidebar-nav-link,
+ .sidebar-loading-indicator,
+ .sidebar-loading-wrapper {
+ transition-property: none !important;
+ }
+
+ .popover-panel,
+ .popover__panel {
+ transform: none !important;
+ }
+
+ .popover-panel[data-state="open"],
+ .popover__panel[data-state="open"] {
+ opacity: 1;
+ }
+
+ .popover-panel[data-state="closed"],
+ .popover__panel[data-state="closed"] {
+ opacity: 0;
+ }
+
+ .card[data-motion="enter"],
+ .fade-in {
+ opacity: 1;
+ animation: none !important;
+ }
+
+ [data-video-thumbnail][data-thumbnail-loaded="true"] {
+ animation: none !important;
+ opacity: 1;
+ }
+
+ .notification-banner,
+ .torrent-toast,
+ .status-banner .status-spinner,
+ .status-spinner--inline {
+ animation: none !important;
+ }
+
+ .notification-portal {
+ transform: none !important;
+ opacity: 1 !important;
+ }
+}
+
+@layer components {
+ .ui-grid-row {
+ border-bottom: var(--border-width-hairline) solid
+ var(--color-border-subtle, var(--color-border));
+ }
+
+ .status-line {
+ @apply my-1 text-sm leading-snug text-text;
+ }
+
+ /* Status log containers reserve space for dynamic messages. */
+ .status-log {
+ @apply min-h-status-log;
+ }
+
+ .status-line.error {
+ color: var(--color-critical-strong);
+ }
+
+ .status-line.success {
+ }
+
+ .status-line.warn {
+ color: var(--color-warning-strong);
+ }
+
+ /* Blog layout root scaffolding */
+
+ @keyframes ztr-rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes ztr-dash {
+ 0% {
+ stroke-dasharray: 1, 150;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -35;
+ }
+
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -124;
+ }
+ }
+
+ @keyframes svelte-181fgen-loader-animation {
+ 0% {
+ transform: rotate(0);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes svelte-181fgen-fade-in {
+ to {
+ opacity: 1;
+ }
+ }
+}
+
+@layer components {
+ .dm-app-shell {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+ padding: var(--space-lg);
+ background: var(--surface-base);
+ color: var(--text-primary);
+ min-height: 100vh;
+ }
+
+ .profile-modal .dm-app-shell {
+ min-height: 0;
+ height: auto;
+ padding: 0;
+ gap: var(--space-md);
+ }
+
+ .dm-app-shell__sidebar,
+ .dm-app-shell__main {
+ border-radius: var(--radius-lg);
+ border: var(--border-width-hairline) solid var(--border-default);
+ background: var(--surface-panel);
+ box-shadow: var(--shadow-soft);
+ }
+
+ .profile-modal .dm-app-shell__sidebar,
+ .profile-modal .dm-app-shell__main {
+ height: auto;
+ min-height: 0;
+ border: none;
+ box-shadow: none;
+ background: transparent;
+ padding: 0;
+ }
+
+ .dm-app-shell__sidebar {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ }
+
+ .dm-app-shell__title {
+ font-size: var(--font-size-lg);
+ margin: 0;
+ }
+
+ .dm-app-shell__main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ background: var(--surface-raised);
+ }
+
+ .profile-modal .dm-app-shell__main,
+ .profile-modal .dm-app-shell__sidebar {
+ min-width: 0;
+ }
+
+ .dm-conversation-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ }
+
+ .dm-conversation-list__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .dm-conversation-list__title {
+ font-size: var(--font-size-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--text-muted);
+ margin: 0;
+ }
+
+ .dm-conversation-list__items {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ overflow-y: auto;
+ max-height: 60vh;
+ padding-right: var(--space-xs);
+ }
+
+ .dm-conversation-list__state {
+ font-size: var(--font-size-sm);
+ color: var(--text-muted);
+ padding: var(--space-md);
+ text-align: center;
+ background: var(--surface-sunken);
+ border-radius: var(--radius-md);
+ }
+
+ .dm-contact-row {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ background: transparent;
+ color: inherit;
+ text-align: left;
+ cursor: pointer;
+ }
+
+ .dm-contact-row:hover,
+ .dm-contact-row:focus-visible {
+ background: var(--surface-muted);
+ border-color: var(--border-strong);
+ outline: none;
+ }
+
+ .dm-contact-row--active {
+ background: var(--surface-sunken);
+ border-color: var(--border-strong);
+ }
+
+ .dm-contact-row__content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2xs);
+ flex: 1;
+ }
+
+ .dm-contact-row__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: var(--space-xs);
+ }
+
+ .dm-contact-row__meta {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ }
+
+ .dm-contact-row__name {
+ font-weight: 600;
+ }
+
+ .dm-contact-row__time {
+ font-size: var(--font-size-2xs);
+ color: var(--text-muted);
+ }
+
+ .dm-contact-row__preview {
+ font-size: var(--font-size-xs);
+ color: var(--text-muted);
+ }
+
+ .dm-contact-row__badge {
+ align-self: flex-start;
+ padding: var(--space-3xs) var(--space-xs);
+ border-radius: var(--radius-full);
+ background: var(--color-accent);
+ color: var(--color-white);
+ font-size: var(--font-size-3xs);
+ }
+
+ .dm-avatar {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border-radius: var(--radius-full);
+ background: var(--surface-sunken);
+ color: var(--text-muted);
+ font-weight: 600;
+ overflow: hidden;
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ }
+
+ .dm-avatar--md {
+ width: var(--space-xl-plus);
+ height: var(--space-xl-plus);
+ min-width: var(--space-xl-plus);
+ min-height: var(--space-xl-plus);
+ }
+
+ .dm-avatar--sm {
+ width: var(--space-xl);
+ height: var(--space-xl);
+ min-width: var(--space-xl);
+ min-height: var(--space-xl);
+ }
+
+ .dm-avatar__image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .dm-message-thread {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ flex: 1;
+ min-height: 0;
+ }
+
+ .dm-message-thread__header {
+ display: flex;
+ align-items: baseline;
+ gap: var(--space-sm);
+ }
+
+ .dm-message-thread__title {
+ font-size: var(--font-size-base);
+ margin: 0;
+ }
+
+ .dm-message-thread__status {
+ font-size: var(--font-size-xs);
+ color: var(--text-muted);
+ }
+
+ .dm-message-thread__zap-summary {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ padding: var(--space-2xs) var(--space-xs);
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ background: var(--surface-sunken);
+ color: var(--text-muted);
+ font-size: var(--font-size-2xs);
+ }
+
+ .dm-message-thread__zap-label {
+ text-transform: uppercase;
+ letter-spacing: var(--tracking-wide);
+ }
+
+ .dm-message-thread__zap-total {
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .dm-message-thread__zap-profile {
+ color: var(--text-muted);
+ }
+
+ .dm-message-thread__timeline {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
+ background: var(--surface-panel);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ overflow-y: auto;
+ min-height: var(--size-16rem);
+ }
+
+ .dm-message-thread__state {
+ padding: var(--space-md);
+ text-align: center;
+ color: var(--text-muted);
+ background: var(--surface-sunken);
+ border-radius: var(--radius-md);
+ }
+
+ .dm-message-row {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--space-xs);
+ width: 100%;
+ }
+
+ .dm-message-row--incoming {
+ justify-content: flex-start;
+ }
+
+ .dm-message-row--outgoing {
+ justify-content: flex-end;
+ }
+
+ .dm-message-avatar {
+ width: var(--space-xl);
+ height: var(--space-xl);
+ flex-shrink: 0;
+ border-radius: var(--radius-full);
+ object-fit: cover;
+ background-color: var(--surface-sunken);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ }
+
+ .dm-message-bubble {
+ max-width: 75%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2xs);
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-lg);
+ border: var(--border-width-hairline) solid var(--message-bubble-border);
+ background: var(--message-bubble-background);
+ color: var(--message-bubble-text);
+ }
+
+ .dm-message-bubble--incoming {
+ border-bottom-left-radius: var(--radius-sm);
+ }
+
+ .dm-message-bubble--outgoing {
+ background: var(--color-accent);
+ color: var(--color-white);
+ border-color: var(--color-accent-strong);
+ border-bottom-right-radius: var(--radius-sm);
+ }
+
+ .dm-message-bubble--outgoing .dm-message-bubble__meta,
+ .dm-message-bubble--outgoing .dm-message-bubble__status {
+ color: var(--color-white);
+ opacity: 0.9;
+ }
+
+ .dm-message-bubble__content {
+ font-size: var(--font-size-sm);
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+ }
+
+ .dm-message-bubble__meta {
+ display: flex;
+ gap: var(--space-xs);
+ font-size: var(--font-size-2xs);
+ color: var(--message-bubble-meta);
+ }
+
+ .dm-message-bubble__status {
+ color: var(--text-muted);
+ }
+
+ .dm-message-bubble__status[data-status="pending"] {
+ color: var(--status-warning);
+ }
+
+ .dm-message-bubble__status[data-status="sending"] {
+ color: var(--status-info);
+ }
+
+ .dm-message-bubble__status[data-status="failed"] {
+ color: var(--status-danger);
+ }
+
+ .dm-message-thread__new {
+ align-self: center;
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ padding: var(--space-2xs) var(--space-sm);
+ font-size: var(--font-size-2xs);
+ background: var(--surface-sunken);
+ color: var(--text-muted);
+ }
+
+ .dm-message-thread__new:hover,
+ .dm-message-thread__new:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ color: var(--text-primary);
+ outline: none;
+ }
+
+ .dm-day-divider {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ gap: var(--space-xs);
+ color: var(--text-muted);
+ font-size: var(--font-size-2xs);
+ }
+
+ .dm-day-divider__line {
+ height: var(--border-width-hairline);
+ background: var(--border-subtle);
+ }
+
+ .dm-notification-center {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ }
+
+ .dm-notification-center__filters {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-xs);
+ }
+
+ .dm-notification-center__filter-button {
+ border-radius: var(--radius-full);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ background: var(--surface-sunken);
+ padding: var(--space-2xs) var(--space-sm);
+ font-size: var(--font-size-2xs);
+ font-weight: 600;
+ color: var(--text-muted);
+ transition:
+ color var(--motion-duration-fast) var(--motion-ease-out),
+ background var(--motion-duration-fast) var(--motion-ease-out),
+ border-color var(--motion-duration-fast) var(--motion-ease-out);
+ }
+
+ .dm-notification-center__filter-button:hover,
+ .dm-notification-center__filter-button:focus-visible {
+ outline: none;
+ border-color: var(--border-strong);
+ background: var(--surface-raised);
+ color: var(--text-primary);
+ }
+
+ .dm-notification-center__filter-button--active {
+ border-color: var(--border-strong);
+ background: var(--surface-overlay-panel);
+ color: var(--text-primary);
+ }
+
+ .dm-notification-center__groups {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ }
+
+ .dm-notification-center__group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ }
+
+ .dm-notification-center__group-title {
+ font-size: var(--font-size-2xs);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: var(--tracking-wide);
+ color: var(--text-muted);
+ }
+
+ .dm-notification-center__list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ }
+
+ .dm-notification-center__empty {
+ font-size: var(--font-size-xs);
+ color: var(--text-muted);
+ }
+
+ .dm-notification-item {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ background: var(--surface-sunken);
+ font-size: var(--font-size-xs);
+ text-align: left;
+ transition:
+ border-color var(--motion-duration-fast) var(--motion-ease-out),
+ background var(--motion-duration-fast) var(--motion-ease-out);
+ }
+
+ .dm-notification-item:hover,
+ .dm-notification-item:focus-visible {
+ outline: none;
+ border-color: var(--border-strong);
+ background: var(--surface-raised);
+ }
+
+ .dm-notification-item__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--icon-size-md);
+ height: var(--icon-size-md);
+ border-radius: var(--radius-full);
+ background: var(--surface-overlay-panel-soft);
+ color: var(--text-muted);
+ font-size: var(--font-size-xs);
+ }
+
+ .dm-notification-item__body {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2xs);
+ min-width: 0;
+ }
+
+ .dm-notification-item__title {
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .dm-notification-item__message {
+ color: var(--text-muted);
+ }
+
+ .dm-notification-item__meta {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2xs);
+ color: var(--text-muted);
+ }
+
+ .dm-notification-item__timestamp {
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
+ }
+
+ .dm-notification-item--info {
+ background: var(--status-info-surface);
+ border-color: var(--status-info-border);
+ color: var(--status-info-on);
+ }
+
+ .dm-notification-item--success {
+ background: var(--status-success-surface);
+ border-color: var(--status-success-border);
+ color: var(--status-success-on);
+ }
+
+ .dm-notification-item--warning {
+ background: var(--status-warning-surface);
+ border-color: var(--status-warning-border);
+ color: var(--status-warning-on);
+ }
+
+ .dm-notification-item--error {
+ background: var(--status-danger-surface);
+ border-color: var(--status-danger-border);
+ color: var(--status-danger-on);
+ }
+
+ .reply-highlight {
+ padding: var(--space-xs) var(--space-sm);
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--reply-highlight-border);
+ background: var(--reply-highlight-background);
+ color: var(--reply-highlight-text);
+ }
+
+ .reply-highlight svg {
+ color: var(--reply-highlight-icon);
+ }
+
+ .dm-composer {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ }
+
+ .dm-composer__label {
+ font-size: var(--font-size-xs);
+ color: var(--text-muted);
+ }
+
+ .dm-composer__input {
+ resize: vertical;
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-default);
+ background: var(--surface-base);
+ color: var(--text-primary);
+ padding: var(--space-sm);
+ font-family: inherit;
+ }
+
+ .dm-composer__input:focus-visible {
+ outline: var(--space-3xs) solid var(--color-accent);
+ outline-offset: var(--space-3xs);
+ }
+
+ .dm-composer__actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: var(--space-sm);
+ }
+
+ .dm-composer__tools {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+ position: relative;
+ }
+
+ .dm-composer__hint {
+ font-size: var(--font-size-2xs);
+ color: var(--text-muted);
+ }
+
+ .dm-composer__attach,
+ .dm-composer__more-btn {
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-default);
+ background: var(--surface-base);
+ color: var(--text-muted);
+ padding: var(--space-2xs) var(--space-sm);
+ font-size: var(--font-size-2xs);
+ cursor: pointer;
+ }
+
+ .dm-composer__more-btn {
+ font-weight: 700;
+ line-height: 1;
+ min-width: var(--space-xl);
+ }
+
+ .dm-composer__more-menu {
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ margin-bottom: var(--space-xs);
+ background: var(--surface-overlay-panel);
+ border: var(--border-width-hairline) solid var(--border-default);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-popover);
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ min-width: var(--size-8rem);
+ padding: var(--space-xs);
+ }
+
+ .dm-composer__menu-item {
+ text-align: left;
+ padding: var(--space-xs) var(--space-sm);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ color: var(--text-muted);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition: background var(--motion-duration-fast) ease-out;
+ }
+
+ .dm-composer__menu-item:hover,
+ .dm-composer__menu-item:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ color: var(--text-primary);
+ outline: none;
+ }
+
+ .dm-composer__menu-item[aria-pressed="true"] {
+ background: var(--color-accent);
+ color: var(--color-white);
+ }
+
+ .dm-composer__attach:hover,
+ .dm-composer__attach:focus-visible,
+ .dm-composer__more-btn:hover,
+ .dm-composer__more-btn:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ color: var(--text-primary);
+ outline: none;
+ }
+
+ .dm-composer__send {
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-strong);
+ background: var(--surface-overlay-panel);
+ color: var(--text-primary);
+ padding: var(--space-xs) var(--space-md);
+ font-weight: 600;
+ cursor: pointer;
+ }
+
+ .dm-composer__send:hover,
+ .dm-composer__send:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ outline: none;
+ }
+
+ .dm-composer__zap-panel {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-subtle);
+ background: var(--surface-sunken);
+ }
+
+ .dm-composer__zap-recipient {
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ color: var(--text-primary);
+ }
+
+ .dm-composer__zap-address {
+ font-size: var(--font-size-2xs);
+ color: var(--text-muted);
+ }
+
+ .dm-composer__zap-label {
+ font-size: var(--font-size-2xs);
+ text-transform: uppercase;
+ letter-spacing: var(--tracking-wide);
+ color: var(--text-muted);
+ }
+
+ .dm-composer__zap-input {
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-default);
+ background: var(--surface-base);
+ color: var(--text-primary);
+ padding: var(--space-2xs) var(--space-sm);
+ font-size: var(--font-size-xs);
+ font-family: inherit;
+ }
+
+ .dm-composer__zap-input:focus-visible {
+ outline: var(--size-2px) solid var(--color-accent);
+ outline-offset: var(--size-2px);
+ }
+
+ .dm-composer__zap-actions {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .dm-composer__zap-send {
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid var(--border-strong);
+ background: var(--surface-overlay-panel);
+ color: var(--text-primary);
+ padding: var(--space-2xs) var(--space-md);
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ cursor: pointer;
+ }
+
+ .dm-composer__zap-send:hover,
+ .dm-composer__zap-send:focus-visible {
+ background: var(--surface-overlay-panel-soft);
+ outline: none;
+ }
+
+ .dm-composer__zap-status {
+ font-size: var(--font-size-2xs);
+ color: var(--text-muted);
+ min-height: var(--space-md);
+ }
+
+ .dm-composer__zap-status[data-state="error"] {
+ color: var(--status-danger);
+ }
+
+ .dm-composer__zap-status[data-state="success"] {
+ color: var(--status-success);
+ }
+
+ .dm-composer__status {
+ font-size: var(--font-size-2xs);
+ color: var(--status-danger);
+ min-height: var(--space-md);
+ }
+
+ @media (max-width: calc(theme("screens.md") - 0.02px)) {
+ .dm-app-shell[data-dm-view="list"] .dm-app-shell__main {
+ display: none !important;
+ }
+
+ .dm-app-shell[data-dm-view="thread"] .dm-app-shell__sidebar {
+ display: none !important;
+ }
+
+ .dm-message-thread__back {
+ @apply inline-flex items-center gap-2;
+ }
+ }
+
+ @media (min-width: theme("screens.md")) {
+ .dm-app-shell {
+ flex-direction: row;
+ align-items: stretch;
+ }
+
+ .dm-app-shell__sidebar {
+ flex: 0 0 var(--size-18rem);
+ max-width: var(--size-20rem);
+ height: calc(100vh - var(--space-lg) * 2);
+ display: flex !important;
+ }
+
+ .dm-app-shell__main {
+ height: calc(100vh - var(--space-lg) * 2);
+ display: flex !important;
+ }
+
+ .dm-conversation-list__items {
+ max-height: none;
+ flex: 1;
+ }
+
+ .dm-message-thread__back {
+ display: none !important;
+ }
+ }
+
+ /* Ensure the profile pane for messages takes full height */
+ #profilePaneMessages {
+ height: 100%;
+ min-height: 0;
+ }
+
+ @media (min-width: theme("screens.md")) {
+ .profile-modal .dm-app-shell {
+ flex-direction: row;
+ align-items: stretch;
+ height: 100%;
+ min-height: 0;
+ }
+
+ .profile-modal .dm-app-shell__sidebar {
+ flex: 0 0 var(--size-18rem);
+ max-width: var(--size-20rem);
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .profile-modal .dm-app-shell__main {
+ flex: 1 1 auto;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .profile-modal .dm-conversation-list {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .profile-modal .dm-conversation-list__items {
+ flex: 1;
+ overflow-y: auto;
+ min-height: 0;
+ overscroll-behavior-y: contain;
+ @apply no-scrollbar;
+ }
+
+ .profile-modal .dm-message-thread {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .profile-modal .dm-message-thread__timeline {
+ flex: 1;
+ overflow-y: auto;
+ min-height: 0;
+ overscroll-behavior-y: contain;
+ @apply no-scrollbar;
+ }
+ }
+
+ @media (min-width: theme("screens.lg")) {
+ .dm-app-shell__sidebar {
+ flex-basis: var(--size-20rem);
+ }
+
+ .dm-message-thread__timeline {
+ padding: var(--space-md);
+ }
+ }
+}
+
+/* Profile Modal Full Screen Overrides */
+#profileModal {
+ padding: 0;
+ width: 100vw;
+ height: 100vh;
+ max-width: none;
+ max-height: none;
+}
+
+#profileModal .bv-modal__panel {
+ width: 100%;
+ height: 100%;
+ max-width: none;
+ max-height: none;
+ border-radius: 0;
+ border: none;
+}
+
+/* Override responsive max-height constraint */
+@media (min-width: theme("screens.lg")) {
+ #profileModal .profile-modal {
+ max-block-size: none;
+ }
+}
+
+@layer components {
+ .marquee-host {
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ .marquee-static {
+ @apply truncate;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+ }
+
+ .marquee-anim {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ pointer-events: none;
+ mask-image: linear-gradient(
+ to right,
+ transparent,
+ black 4%,
+ black 96%,
+ transparent
+ );
+ -webkit-mask-image: linear-gradient(
+ to right,
+ transparent,
+ black 4%,
+ black 96%,
+ transparent
+ );
+ }
+
+ .marquee-track {
+ display: flex;
+ width: max-content;
+ animation: marquee-scroll linear infinite;
+ animation-duration: var(--marquee-duration, 10s);
+ animation-play-state: paused;
+ }
+
+ .marquee-item {
+ flex-shrink: 0;
+ padding-right: var(--space-xl); /* Gap between loop items */
+ }
+
+ @keyframes marquee-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+ }
+
+ /* Desktop Hover State */
+ @media (min-width: theme("screens.lg")) {
+ .card:hover .marquee-host.can-marquee .marquee-static {
+ opacity: 0;
+ }
+ .card:hover .marquee-host.can-marquee .marquee-anim {
+ opacity: 1;
+ }
+ .card:hover .marquee-host.can-marquee .marquee-track {
+ animation-play-state: running;
+ }
+ }
+
+ /* Mobile Active State */
+ @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+ .card[data-mobile-active="true"] {
+ --video-card-lift-translate-y: var(--motion-video-card-hover-translate);
+ --video-card-backdrop-opacity: 0.425;
+ --video-card-backdrop-translate-y: var(
+ --motion-video-card-backdrop-translate
+ );
+ --video-card-backdrop-scale: 1.12;
+ --video-card-backdrop-blur: var(--blur-video-card-backdrop-strong);
+ @apply shadow-lg;
+ }
+
+ .card[data-mobile-active="true"] .video-card__title {
+ color: var(--color-accent);
+ }
+
+ .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-static {
+ opacity: 0;
+ }
+ .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-anim {
+ opacity: 1;
+ }
+ .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-track {
+ animation-play-state: running;
+ }
+ }
+}
+
+.no-scrollbar {
+ scrollbar-width: none !important;
+ -ms-overflow-style: none !important;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+ display: none !important;
+}
+
+/* Embed & Video Modal Fixes */
+@layer components {
+ /* Logo accent wiring */
+ .bv-logo__accent {
+ fill: var(--bitvid-accent, var(--logo-accent-color));
+ }
+}
diff --git a/dist/css/tokens.css b/dist/css/tokens.css
new file mode 100644
index 00000000..3d4c9475
--- /dev/null
+++ b/dist/css/tokens.css
@@ -0,0 +1,864 @@
+:root {
+ /* Semantic palette */
+ --surface-base: var(--color-surface);
+ --surface-alt: var(--color-surface-alt);
+ --surface-raised: var(--color-card);
+ --surface-raised-private: var(--color-card-private);
+ --surface-raised-critical: var(--color-card-critical);
+ --surface-panel: var(--color-panel);
+ --surface-panel-hover: var(--color-panel-hover);
+ --surface-sunken: var(--color-surface-sunken);
+ --surface-muted: var(--color-surface-muted);
+ --surface-veil: var(--color-overlay-veil);
+ --surface-inverse: var(--color-page);
+
+ --surface-overlay: var(--color-overlay);
+ --surface-overlay-muted: var(--color-overlay-muted);
+ --surface-overlay-strong: var(--color-overlay-strong);
+ --surface-overlay-darker: var(--color-overlay-darker);
+ --surface-overlay-black: var(--color-overlay-black);
+ --surface-overlay-banner-base: var(--color-page);
+ --surface-overlay-banner: var(--surface-overlay-banner-base);
+ --surface-overlay-banner-opaque: var(--surface-overlay-banner-base);
+ --surface-overlay-banner-strong: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 82%,
+ transparent
+ );
+ --surface-overlay-banner-bottom: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 50%,
+ transparent
+ );
+ --surface-overlay-banner-channel-mid: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 24%,
+ transparent
+ );
+ --surface-overlay-banner-channel-faint: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 10%,
+ transparent
+ );
+ --surface-overlay-banner-soft: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 56%,
+ transparent
+ );
+ --surface-overlay-banner-faint: color-mix(
+ in srgb,
+ var(--surface-overlay-banner-base) 18%,
+ transparent
+ );
+ --surface-overlay-banner-transparent: transparent;
+ --surface-overlay-banner-gradient-header: linear-gradient(
+ to bottom,
+ var(--surface-overlay-banner-opaque) 0%,
+ var(--surface-overlay-banner-strong) 38%,
+ var(--surface-overlay-banner-soft) 70%,
+ var(--surface-overlay-banner-faint) 88%,
+ var(--surface-overlay-banner-transparent) 100%
+ );
+ --surface-overlay-banner-gradient-channel: linear-gradient(
+ to top,
+ var(--surface-overlay-banner-bottom) 0%,
+ var(--surface-overlay-banner-channel-mid) 28%,
+ var(--surface-overlay-banner-channel-faint) 42%,
+ var(--surface-overlay-banner-transparent) 50%
+ );
+ --surface-overlay-banner-gradient: var(
+ --surface-overlay-banner-gradient-header
+ );
+ --surface-overlay-panel: var(--color-overlay-panel);
+ --surface-overlay-panel-soft: var(--color-overlay-panel-soft);
+ --surface-overlay-panel-tint: var(--color-overlay-panel-tint);
+ --surface-overlay-panel-glass: var(--color-overlay-panel-glass);
+ --surface-overlay-panel-glass-soft: var(--color-overlay-panel-glass-soft);
+ --surface-modal-backdrop: var(--color-modal-backdrop);
+ --surface-modal: var(--color-modal-surface);
+ --blur-modal-backdrop: 18px;
+ --blur-modal-alert: 14px;
+ --blur-thumbnail-blur: 18px;
+ --modal-nav-backdrop-blur: 6px;
+
+ --app-header-centerline-offset: calc(
+ var(--space-sm) + (var(--space-2xl-plus) / 2)
+ );
+ --border-default: var(--color-border);
+ --border-subtle: var(--color-border-subtle);
+ --border-strong: var(--color-border-translucent-stronger);
+ --border-overlay: var(--color-border-translucent);
+ --border-overlay-strong: var(--color-border-translucent-strongest);
+ --border-overlay-glow: var(--color-border-translucent-glow);
+ --border-neutral-soft: var(--color-border-neutral-soft);
+ --border-info-soft: var(--color-border-info-soft);
+ --border-sidebar-strong: var(--color-border-sidebar-strong);
+ --border-width-hairline: 1px;
+ --border-width-fine: 0.5px;
+
+ --text-primary: var(--color-text);
+ --text-inverse: var(--color-text-inverse);
+ --text-muted: var(--color-text-muted);
+ --text-muted-strong: var(--color-muted-strong);
+ --text-subtle: var(--color-subtle-text);
+ --text-frosted-primary: var(--color-text-frosted);
+ --text-frosted-strong: var(--color-text-frosted-strong);
+ --text-frosted-soft: var(--color-text-frosted-soft);
+
+ --status-info: var(--color-info);
+ --status-info-strong: var(--color-info-strong);
+ --status-info-surface: var(--color-info-glass);
+ --status-info-border: var(--color-info-border);
+ --status-info-on: var(--color-info-on);
+
+ --status-success: var(--color-success);
+ --status-success-strong: var(--color-success-strong);
+ --status-success-surface: var(--color-success-surface);
+ --status-success-border: var(--color-success-border);
+ --status-success-on: var(--color-success-on);
+
+ --status-warning: var(--color-warning);
+ --status-warning-strong: var(--color-warning-strong);
+ --status-warning-surface: var(--color-warning-surface);
+ --status-warning-border: var(--color-warning-border);
+ --status-warning-on: var(--color-warning-on);
+
+ --status-danger: var(--color-critical);
+ --status-danger-strong: var(--color-critical-strong);
+ --status-danger-surface: var(--color-danger-surface);
+ --status-danger-border: var(--color-danger-border);
+ --status-danger-on: var(--color-danger-on);
+
+ --status-private: var(--color-private);
+ --status-private-strong: var(--color-private-strong);
+ --status-private-surface: var(--color-private-surface);
+ --status-private-border: var(--color-private-border);
+ --status-private-on: var(--color-private-on);
+
+ --status-neutral: var(--color-muted);
+ --status-neutral-strong: var(--color-muted-strong);
+ --status-neutral-surface: var(--color-neutral-surface);
+ --status-neutral-border: var(--color-neutral-border);
+ --status-neutral-on: var(--color-neutral-on);
+
+ /* Messaging & notifications */
+ --message-bubble-background: var(--surface-sunken);
+ --message-bubble-border: var(--border-subtle);
+ --message-bubble-text: var(--text-primary);
+ --message-bubble-meta: var(--text-muted);
+ --message-bubble-outgoing-background: var(--surface-overlay-panel);
+ --message-bubble-outgoing-border: var(--border-overlay);
+
+ --unread-badge-background: var(--status-info-strong);
+ --unread-badge-text: var(--text-inverse);
+
+ --reply-highlight-background: var(--status-info-surface);
+ --reply-highlight-border: var(--status-info-border);
+ --reply-highlight-text: var(--status-info-on);
+ --reply-highlight-icon: var(--status-info-on);
+
+ --notification-banner-accent: var(--color-accent-strong);
+ --notification-banner-accent-strong: var(--color-accent);
+ --notification-banner-border: var(--surface-overlay-panel-tint);
+ --notification-banner-background: var(--surface-overlay-panel);
+ --notification-banner-text: var(--text-primary);
+ --notification-banner-icon: var(--text-primary);
+
+ --notification-banner-critical-accent: var(--status-danger-strong);
+ --notification-banner-critical-accent-strong: var(--status-danger);
+ --notification-banner-critical-border: var(--color-ring-critical-soft);
+ --notification-banner-critical-background: var(--surface-raised-critical);
+ --notification-banner-critical-text: var(--status-danger-on);
+
+ --notification-banner-success-accent: var(--status-success-strong);
+ --notification-banner-success-accent-strong: var(--status-success);
+ --notification-banner-success-border: var(--status-success-border);
+ --notification-banner-success-background: var(--status-success-surface);
+ --notification-banner-success-text: var(--status-success-on);
+
+ --notification-banner-info-accent: var(--status-info-strong);
+ --notification-banner-info-accent-strong: var(--status-info);
+ --notification-banner-info-border: var(--status-info-border);
+ --notification-banner-info-background: var(--status-info-surface);
+ --notification-banner-info-text: var(--status-info-on);
+
+ --notification-banner-warning-accent: var(--status-warning-strong);
+ --notification-banner-warning-accent-strong: var(--status-warning);
+ --notification-banner-warning-border: var(--status-warning-border);
+ --notification-banner-warning-background: var(--status-warning-surface);
+ --notification-banner-warning-text: var(--status-warning-on);
+
+ /* Layout & stacking */
+ --scrollbar-width: 0.5rem;
+ --scrollbar-track: var(--color-white-soft);
+ --scrollbar-thumb: var(--color-white-softer);
+ --scrollbar-thumb-hover: var(--color-white-softest);
+ --z-app-header: 40;
+ --z-overlay-nav: 60;
+ --z-overlay-floating: 70;
+ --z-overlay-popover: 140;
+ --z-overlay-toast: 180;
+ --z-sidebar-overlay: 10;
+ --z-sidebar: 20;
+ --z-modal-root: 100;
+ --z-modal-overlay: 110;
+ --z-modal-content: 120;
+ --z-modal-player: 130;
+ --z-modal-top-root: 140;
+ --z-modal-top-overlay: 150;
+ --z-modal-top-content: 160;
+ --z-modal-peak-root: 165;
+ --z-modal-peak-overlay: 175;
+ --z-modal-peak-content: 185;
+ --z-modal-always-top: 200;
+ --overlay-backdrop-color: var(--color-overlay-backdrop);
+ --overlay-backdrop-blur: 12px;
+ --sidebar-width-expanded-base: 16rem;
+ --sidebar-dropup-content-width: 0px;
+ --sidebar-width-expanded: max(
+ var(--sidebar-width-expanded-base),
+ var(--sidebar-dropup-content-width)
+ );
+ --sidebar-width-collapsed: 4rem;
+ --sidebar-width: var(--sidebar-width-expanded);
+ --sidebar-control-size: 2.75rem;
+ --sidebar-content-gap: 1rem;
+ --space-sidebar-shell-inline: var(--space-lg);
+ --space-sidebar-shell-block-start: var(--space-sm);
+ --space-sidebar-shell-block-end: 1.75rem;
+ --space-sidebar-scroll-gap: 1.75rem;
+ --space-sidebar-panel-gap: 1.35rem;
+ --space-sidebar-panel-padding-block: 1.35rem;
+ --space-sidebar-panel-padding-inline: 1.1rem;
+ --space-sidebar-footer-gap: 0.85rem;
+ --space-sidebar-trigger-padding-block: 0.78rem;
+ --space-sidebar-popover-offset: 0.85rem;
+ --space-sidebar-popover-padding-block: 0.85rem;
+ --space-sidebar-popover-padding-inline: 0.65rem;
+ --space-sidebar-popover-gap: 0.45rem;
+ --space-sidebar-dropup-scroll-reserve: calc(
+ var(--scrollbar-thin-width) + var(--space-sm) + var(--space-2xs)
+ );
+ --sidebar-dropup-max-height: calc(3rem * 6);
+ --space-sidebar-nav-padding-block: 0.7rem;
+ --space-sidebar-nav-padding-inline-start: var(--space-xs);
+ --space-sidebar-nav-padding-inline-end: calc(
+ var(--space-lg) + var(--space-2xs)
+ );
+ --space-sidebar-subnav-padding-block: 0.55rem;
+ --space-sidebar-nav-translate: 0.35rem;
+ --grid-card-min-width: 20rem;
+ /* Breakpoints (sync with Tailwind screen settings) */
+ --breakpoint-lg: 64rem;
+ --popover-backdrop-blur: 12px;
+ --overlay-panel-radius: var(--radius-lg);
+ --overlay-panel-shadow: var(--shadow-lg);
+ --overlay-panel-padding-inline: var(--popup-padding-inline);
+ --overlay-panel-padding-block: var(--popup-padding-block);
+ --toast-translate: -1.5rem;
+ --sidebar-mobile-gutter: 3rem;
+ --popup-padding-inline: 1rem;
+ --popup-padding-block: 0.75rem;
+ --video-modal-primary-fr: 1.85fr;
+ --video-modal-secondary-min: 320px;
+ --video-modal-secondary-max: 35rem;
+ --video-modal-secondary-fr: 1fr;
+ --video-modal-layout-max: calc(
+ var(--layout-player-max-width) + var(--video-modal-secondary-max) +
+ var(--space-2xl-plus)
+ );
+ --revert-modal-sidebar-min: 240px;
+ --revert-modal-sidebar-width: 280px;
+ --popover-inline-safe-max: calc(100vw - var(--space-xl));
+
+ /* Progress primitives */
+ --progress-height-sm: 0.25rem;
+ --progress-height-md: 0.5rem;
+ --progress-radius: var(--radius-full);
+ --progress-track-color: var(--color-border-subtle);
+ --progress-fill-color: var(--color-info);
+ --progress-transition-duration: var(--motion-duration-fast);
+ --progress-transition-ease: var(--motion-ease-out);
+
+ /* Spacing scale */
+ --space-4xs: 0.0625rem;
+ --space-3xs: 0.125rem;
+ --space-2xs: 0.25rem;
+ --space-xs: 0.5rem;
+ --space-xs-snug: 0.4rem;
+ --space-sm: 0.75rem;
+ --space-md: 1rem;
+ --space-md-plus: 1.25rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-xl-compact: 2.25rem;
+ --space-xl-plus: 2.5rem;
+ --space-2xl: 3rem;
+ --space-2xl-plus: 3.5rem;
+
+ /* Measurement primitives */
+ --size-2px: 2px;
+ --size-3px: 3px;
+ --size-12px: 12px;
+ --size-24px: 24px;
+ --size-30px: 30px;
+ --size-32px: 32px;
+ --size-64px: 64px;
+ --size-80px: 80px;
+ --size-96px: 96px;
+ --size-128px: 128px;
+ --size-140px: 140px;
+ --size-168px: 168px;
+ --size-256px: 256px;
+ --size-5-75rem: 5.75rem;
+ --size-6rem: 6rem;
+ --size-7rem: 7rem;
+ --size-8rem: 8rem;
+ --size-12rem: 12rem;
+ --size-12-5rem: 12.5rem;
+ --size-14rem: 14rem;
+ --size-16rem: 16rem;
+ --size-18rem: 18rem;
+ --size-20rem: 20rem;
+ --size-28rem: 28rem;
+ --size-34rem: 34rem;
+ --size-40rem: 40rem;
+ --size-45rem: 45rem;
+ --size-70rem: 70rem;
+
+ /* Border radii */
+ --radius-sm: 0.25rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-full: 9999px;
+ --radius-modal-xl: 1.75rem;
+ --radius-sidebar-shell: 1.5rem;
+ --radius-sidebar-panel: 1.1rem;
+ --radius-sidebar-nav: 0.95rem;
+ --radius-toggle-thumb: 0.5625rem;
+
+ /* Component sizing */
+ --menu-min-width: 12rem;
+ --header-search-max-inline: var(--size-34rem);
+ --modal-max-width: 62.5rem;
+ --modal-sheet-inline-max: var(--modal-max-width);
+ --modal-shell-max-height: 90vh;
+ --modal-sheet-max-height: 92vh;
+ --modal-body-max-height: calc(92vh - 4rem);
+ --profile-modal-inline-max: var(--size-70rem);
+ --player-modal-module-scroll-min-height: var(--size-14rem);
+ --player-modal-module-scroll-max-height: var(--size-28rem);
+ --modal-pane-max-height: 48vh;
+ --modal-pane-min-height: 20rem;
+ --moderation-badge-max-inline: var(--size-28rem);
+ --notification-banner-max-inline: var(--size-28rem);
+ --profile-modal-nav-min-width: max-content;
+ --profile-modal-nav-max-width: max-content;
+ --profile-modal-scrollbar-offset: var(--space-2xs);
+ --modal-embed-height: 80vh;
+ --profile-history-max-height: 26.25rem;
+ --comment-avatar-size: var(--space-xl-plus);
+ --comment-composer-min-height: var(--size-7rem);
+ --video-modal-reaction-label-min-inline: var(--size-6rem);
+ --video-modal-item-media-min: var(--size-5-75rem);
+ --video-modal-item-media-max: var(--size-8rem);
+ --video-card-compact-media-min: var(--size-8rem);
+ --video-card-compact-media-max: var(--size-12-5rem);
+ --similar-card-media-width: var(--size-168px);
+ --similar-card-media-width-sm: var(--size-140px);
+ --docs-popover-scroll-height: var(--size-45rem);
+ --profile-modal-active-min-width: var(--size-12rem);
+ --status-log-min-height: 5rem;
+ --layout-player-max-width: 68.75rem;
+ --layout-docs-max-width: 92.5rem;
+ --icon-size-sm: var(--font-size-lg);
+ --icon-size-md: var(--space-md-plus);
+ --icon-size-lg: var(--space-xl-plus);
+ --avatar-size-lg: var(--space-2xl-plus);
+ --form-textarea-min-height: 8rem;
+ --scrollbar-thin-width: 0.4rem;
+ --modal-progress-height: calc(var(--space-3xs) * 3);
+ --video-modal-action-min-width: 2.75rem;
+ --outline-thick-width: 0.1875rem;
+ --icon-button-ring-width: var(--outline-thick-width);
+
+ /* Form controls */
+ --form-select-icon-offset: var(--space-sm);
+ --form-select-icon-gap: var(--space-xs-snug);
+ --form-select-icon-hit-area: var(--space-xl-plus);
+ --form-select-icon-size: 0.6rem;
+ --form-select-divider-width: var(--border-width-hairline);
+ --form-checkbox-checkmark-offset: calc(var(--space-3xs) * -1);
+
+ /* Utility measurements */
+ --breakpoint-edge-offset: 0.02px;
+ --offscreen-offset: -9999px;
+
+ /* Motion */
+ --motion-card-enter-translate: var(--space-xs);
+ --motion-fade-in-translate: var(--space-md-plus);
+ --motion-login-option-hover-translate: calc(var(--size-3px) * -1);
+ --motion-video-card-hover-translate: -0.35rem;
+ --motion-video-card-backdrop-translate: 0.15rem;
+
+ /* Shadows */
+ --shadow-sm: 0 0.0625rem 0.125rem 0 var(--color-shadow-floating);
+ --shadow-md: 0 0.25rem 0.375rem -0.0625rem var(--color-shadow-floating);
+ --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem var(--color-shadow-elevated);
+ --shadow-badge-offset-y: var(--size-12px);
+ --shadow-badge-blur: var(--size-30px);
+ --shadow-notification-offset-y: var(--size-32px);
+ --shadow-notification-blur: var(--size-64px);
+ --shadow-modal: 0 2.75rem 6rem -1.25rem var(--color-shadow-modal);
+ --shadow-sidebar-shell: 0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);
+ --shadow-sidebar-accent: 0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);
+ --shadow-sidebar-trigger: 0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);
+ --shadow-sidebar-dropup: 0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);
+ --shadow-sidebar-panel: 0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);
+ --shadow-sidebar-focus-ring:
+ 0 0 0 0.125rem var(--color-sidebar-glow),
+ 0 0 0 0.25rem var(--color-sidebar-hover-strong);
+ --shadow-popover-zap: 0 22px 48px -18px var(--color-shadow-intense);
+ --shadow-video-modal: 0 1rem 2.25rem var(--color-shadow-elevated);
+ --blur-video-card-backdrop-strong: var(--size-24px);
+ --video-modal-ambient-blur-min: var(--size-128px);
+ --video-modal-ambient-blur-max: var(--size-256px);
+
+ /* Typography */
+ --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+ --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
+ --font-size-4xs: 0.65rem;
+ --font-size-3xs: 0.6875rem;
+ --font-size-2xs: 0.7rem;
+ --font-size-xs: 0.75rem;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.5rem;
+ --font-size-2xl: 2rem;
+ --font-size-xl-plus: 1.875rem;
+ --font-size-modal-title-base: 1.25rem;
+ --font-size-sidebar-nav: 0.95rem;
+ --font-size-sidebar-subnav: 0.85rem;
+ --font-size-sidebar-trigger: 0.9rem;
+ --link-underline-thickness: var(--size-2px);
+ --line-height-tight: 1.1;
+ --line-height-snug: 1.25;
+ --line-height-base: 1.5;
+ --line-height-relaxed: 1.75;
+ --tracking-extra-wide: 0.2em;
+
+ /* Beacon UI tokens */
+ --grid-border-width: calc(var(--space-2xs) / 4);
+ --grid-canvas-padding-top: var(--grid-border-width);
+ --grid-viewport-min-height: calc(var(--space-xl) - var(--space-sm));
+ --grid-cell-padding-block: var(--space-sm);
+ --grid-cell-padding-inline: var(--space-md);
+ --grid-header-font-size: var(--font-size-xs);
+ --grid-header-letter-spacing: 0.08em;
+ --grid-overlay-margin: 10%;
+ --grid-overlay-padding-block: var(--space-md);
+ --grid-overlay-padding-inline: var(--space-xl);
+ --grid-overlay-radius: var(--radius-lg);
+ --grid-overlay-font-size: var(--font-size-lg);
+ --grid-overlay-text-opacity: 0.66;
+ --grid-resizer-width: calc(var(--space-2xs) * 1.25);
+ --grid-resize-overlay-width: var(--grid-border-width);
+ --grid-sort-indicator-size: calc(var(--space-lg) - var(--space-2xs));
+ --grid-sort-indicator-offset: var(--space-xs);
+ --grid-sort-indicator-stroke: calc(var(--space-2xs) / 2);
+ --grid-sort-indicator-thickness: var(--grid-border-width);
+ --notify-padding-block: var(--space-md);
+ --notify-padding-inline: var(--space-2xl);
+ --notify-font-size: var(--font-size-base);
+ --notify-dismiss-size: calc(var(--space-xl) + var(--space-xs));
+ --notify-dismiss-size-compact: calc(var(--space-lg) + var(--space-2xs));
+ --notify-dismiss-font-size: var(--font-size-sm);
+ --notify-dismiss-radius: var(--radius-full);
+ --notify-dismiss-color: var(--color-subtle);
+ --notify-dismiss-background: var(--color-overlay-panel);
+ --notify-dismiss-background-hover: var(--color-overlay-panel-soft);
+ --z-notify: 1200;
+
+ /* Motion */
+ --motion-duration-fast: 120ms;
+ --motion-duration-base: 160ms;
+ --motion-duration-slow: 280ms;
+ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --modal-motion-duration: var(--motion-duration-base);
+}
+:root[data-theme="light"] {
+ /* Light theme palette */
+ --color-page: rgb(247 248 252);
+ --color-page-alt: rgb(242 244 248);
+ --color-surface: rgb(255 255 255);
+ --color-surface-alt: rgb(248 250 252);
+ --color-bg: var(--color-surface);
+ --color-card: rgb(255 255 255);
+ --color-card-private: rgb(243 236 255);
+ --color-card-critical: rgb(255 236 238);
+ --color-panel: rgb(252 253 255);
+ --color-panel-hover: rgb(239 242 249);
+ --color-border: rgb(210 219 236);
+ --color-border-subtle: rgb(229 234 242);
+
+ --color-accent: rgb(99 102 241);
+ --color-accent-strong: rgb(79 70 229);
+ --color-accent-pressed: rgb(67 56 202);
+ --color-accent-override: rgb(84 0 17);
+ --color-accent-strong-override: rgb(254 0 50);
+ --color-accent-pressed-override: rgb(169 0 33);
+ --color-primary: var(--color-accent-strong);
+ --color-secondary: var(--color-accent);
+
+ --color-logo-accent: var(--color-accent-strong);
+ --color-logo-wordmark: rgb(40 54 77);
+ --color-logo-wordmark-inverse: var(--color-white);
+ --color-logo-background: rgb(15 23 42);
+ --color-logo-background-inverse: var(--color-white);
+
+ --color-info: rgb(59 130 246);
+ --color-info-strong: rgb(37 99 235);
+ --color-info-pressed: rgb(29 78 216);
+ --color-info-glass: rgb(59 130 246 / 0.14);
+ --color-info-border: rgb(59 130 246 / 0.35);
+ --color-info-on: rgb(227 242 255);
+
+ --color-muted-strong: rgb(71 85 105);
+ --color-text: rgb(24 31 44);
+ --color-text-strong: rgb(12 16 26);
+ --color-text-inverse: rgb(255 255 255);
+ --color-text-muted: rgb(102 112 133);
+ --color-muted: rgb(136 146 166);
+ --color-muted-alt: rgb(120 130 150);
+ --color-subtle-text: rgb(136 146 166);
+ --color-subtle: rgb(243 245 250);
+ --color-surface-sunken: rgb(232 235 244);
+ --color-surface-muted: rgb(236 240 249);
+
+ --color-critical: rgb(220 54 70);
+ --color-critical-strong: rgb(185 32 55);
+ --color-danger-surface: rgb(252 226 230);
+ --color-danger-border: rgb(220 54 70 / 0.35);
+ --color-danger-on: rgb(96 18 31);
+
+ --color-warning: rgb(234 179 8);
+ --color-warning-strong: rgb(202 138 4);
+ --color-warning-surface: rgb(253 224 71 / 0.35);
+ --color-warning-border: rgb(234 179 8 / 0.35);
+ --color-warning-glass: rgb(253 224 71 / 0.18);
+ --color-warning-on: rgb(92 55 2);
+
+ --color-success: rgb(22 163 74);
+ --color-success-strong: rgb(21 128 61);
+ --color-success-surface: rgb(222 250 236);
+ --color-success-border: rgb(34 197 94 / 0.3);
+ --color-success-on: rgb(18 84 48);
+
+ --color-private: rgb(139 92 246);
+ --color-private-strong: rgb(124 58 237);
+ --color-private-surface: rgb(237 233 254);
+ --color-private-border: rgb(139 92 246 / 0.32);
+ --color-private-on: rgb(74 29 150);
+
+ --color-neutral-700: rgb(71 85 105);
+ --color-neutral-600: rgb(102 112 133);
+ --color-neutral-surface: rgb(232 236 244);
+ --color-neutral-border: rgb(205 213 226);
+ --color-neutral-on: rgb(62 72 92);
+
+ --color-white: rgb(255 255 255);
+ --color-black: rgb(0 0 0);
+
+ --color-overlay: rgb(15 23 42 / 0.3);
+ --color-overlay-black: rgb(15 23 42 / 0.7);
+ --color-overlay-muted: rgb(60 75 105 / 0.18);
+ --color-overlay-strong: rgb(15 23 42 / 0.56);
+ --color-overlay-darker: rgb(12 18 32 / 0.68);
+ --color-overlay-panel: rgb(248 250 255 / 0.92);
+ --color-overlay-panel-soft: rgb(244 247 255 / 0.78);
+ --color-overlay-panel-tint: rgb(146 170 211 / 0.24);
+ --color-overlay-panel-glass: rgb(255 255 255 / 0.85);
+ --color-overlay-panel-glass-soft: rgb(246 249 255 / 0.7);
+ --color-overlay-panel-gradient-start: rgb(255 255 255 / 0.95);
+ --color-overlay-panel-gradient-end: rgb(232 236 244 / 0.92);
+ --color-modal-backdrop: rgb(15 23 42 / 0.28);
+ --color-modal-surface: rgb(255 255 255 / 0.94);
+ --color-overlay-veil: rgb(103 112 133 / 0.45);
+ --color-overlay-banner-bottom: rgb(255 255 255 / 0.6);
+ --color-overlay-banner-transparent: rgb(255 255 255 / 0);
+ --color-overlay-backdrop: rgb(15 23 42 / 0.2);
+
+ --scrollbar-track: color-mix(
+ in srgb,
+ var(--color-sidebar-border-strong) 40%,
+ transparent
+ );
+ --scrollbar-thumb: color-mix(in srgb, var(--color-accent) 64%, transparent);
+ --scrollbar-thumb-hover: color-mix(
+ in srgb,
+ var(--color-accent-strong) 76%,
+ transparent
+ );
+
+ --color-sidebar-surface: rgb(255 255 255 / 0.9);
+ --color-sidebar-surface-alt: rgb(236 240 247 / 0.72);
+ --color-sidebar-border: rgb(184 194 212 / 0.28);
+ --color-sidebar-border-strong: rgb(148 163 184 / 0.36);
+ --color-sidebar-hover: color-mix(
+ in srgb,
+ var(--color-accent) 16%,
+ transparent
+ );
+ --color-sidebar-hover-strong: color-mix(
+ in srgb,
+ var(--color-accent-strong) 24%,
+ transparent
+ );
+ --color-sidebar-glow: color-mix(
+ in srgb,
+ var(--color-accent) 36%,
+ transparent
+ );
+ --color-sidebar-accent-start: color-mix(
+ in srgb,
+ var(--color-accent-strong) 88%,
+ transparent
+ );
+ --color-sidebar-accent-end: color-mix(
+ in srgb,
+ var(--color-accent) 82%,
+ transparent
+ );
+ --color-sidebar-text-muted: var(--color-text-muted);
+ --sidebar-icon-filter: brightness(0) saturate(100%);
+
+ --color-surface-tint-subtle: rgb(15 23 42 / 0.08);
+ --color-border-translucent: rgb(148 163 184 / 0.18);
+ --color-border-translucent-strong: rgb(148 163 184 / 0.22);
+ --color-border-translucent-bright: rgb(148 163 184 / 0.28);
+ --color-border-translucent-stronger: rgb(148 163 184 / 0.32);
+ --color-border-translucent-strongest: rgb(148 163 184 / 0.36);
+ --color-border-translucent-glow: rgb(148 163 184 / 0.45);
+ --color-border-translucent-medium: rgb(148 163 184 / 0.2);
+ --color-border-neutral-soft: rgb(148 163 184 / 0.25);
+ --color-border-info-soft: rgb(59 130 246 / 0.32);
+ --color-border-sidebar-strong: rgb(102 112 133 / 0.75);
+
+ --color-ring-private: rgb(139 92 246 / 0.5);
+ --color-ring-private-hover: rgb(168 85 247 / 0.6);
+ --color-ring-critical: rgb(220 54 70 / 0.35);
+ --color-ring-critical-soft: rgb(220 54 70 / 0.3);
+ --color-ring-critical-hover: rgb(220 54 70 / 0.4);
+ --color-ring-critical-strong: rgb(220 54 70 / 0.5);
+ --color-ring-alert: rgb(239 68 68 / 0.48);
+
+ --color-gradient-visibility-start: rgb(99 102 241 / 0.28);
+ --color-gradient-visibility-end: rgb(129 140 248 / 0.24);
+
+ --color-white-soft: rgb(255 255 255 / 0.08);
+ --color-white-softer: rgb(255 255 255 / 0.24);
+ --color-white-softest: rgb(255 255 255 / 0.32);
+
+ --color-shadow-floating: rgb(15 23 42 / 0.18);
+ --color-shadow-elevated: rgb(15 23 42 / 0.16);
+ --color-shadow-panel: rgb(15 23 42 / 0.12);
+ --color-shadow-notification: rgb(15 23 42 / 0.14);
+ --color-shadow-intense: rgb(15 23 42 / 0.22);
+ --color-shadow-sidebar: rgb(15 23 42 / 0.28);
+ --color-shadow-modal: rgb(15 23 42 / 0.28);
+
+ --color-divider-strong: rgb(203 213 225 / 0.6);
+ --color-text-frosted-strong: rgb(40 54 77 / 0.85);
+ --color-text-frosted: rgb(61 74 98 / 0.8);
+ --color-text-frosted-soft: rgb(82 96 122 / 0.72);
+}
+:root[data-theme="dark"],
+:root:not([data-theme]) {
+ /* Dark theme palette */
+ --color-page: rgb(6 10 18);
+ --color-page-alt: rgb(8 12 22);
+ --color-surface: rgb(10 14 26);
+ --color-surface-alt: rgb(14 20 34);
+ --color-bg: var(--color-surface);
+ --color-card: rgb(18 26 44);
+ --color-card-private: rgb(38 28 62);
+ --color-card-critical: rgb(58 20 28);
+ --color-panel: rgb(16 24 40);
+ --color-panel-hover: rgb(24 34 52);
+ --color-border: rgb(61 80 112);
+ --color-border-subtle: rgb(38 52 76);
+
+ --color-accent: rgb(129 140 248);
+ --color-accent-strong: rgb(99 102 241);
+ --color-accent-pressed: rgb(79 70 229);
+ --color-accent-override: rgb(84 0 17);
+ --color-accent-strong-override: rgb(254 0 50);
+ --color-accent-pressed-override: rgb(169 0 33);
+ --color-primary: var(--color-accent-strong);
+ --color-secondary: rgb(56 189 248);
+
+ --color-logo-accent: var(--color-accent-strong);
+ --color-logo-wordmark: rgb(198 207 222);
+ --color-logo-wordmark-inverse: var(--color-white);
+ --color-logo-background: rgb(12 18 30);
+ --color-logo-background-inverse: var(--color-white);
+
+ --color-info: rgb(96 165 250);
+ --color-info-strong: rgb(56 132 255);
+ --color-info-pressed: rgb(37 99 235);
+ --color-info-glass: rgb(56 132 255 / 0.22);
+ --color-info-border: rgb(96 165 250 / 0.42);
+ --color-info-on: rgb(235 244 255);
+
+ --color-muted-strong: rgb(206 215 232);
+ --color-text: rgb(226 232 240);
+ --color-text-strong: rgb(244 247 255);
+ --color-text-inverse: rgb(12 18 30);
+ --color-text-muted: rgb(165 179 201);
+ --color-muted: rgb(148 163 184);
+ --color-muted-alt: rgb(128 139 162);
+ --color-subtle-text: rgb(168 180 205);
+ --color-subtle: rgb(28 38 58);
+ --color-surface-sunken: rgb(13 19 32 / 0.92);
+ --color-surface-muted: rgb(18 26 44 / 0.82);
+
+ --color-critical: rgb(239 83 98);
+ --color-critical-strong: rgb(220 38 38);
+ --color-danger-surface: rgb(220 38 38 / 0.28);
+ --color-danger-border: rgb(220 38 38 / 0.45);
+ --color-danger-on: rgb(255 228 233);
+
+ --color-warning: rgb(250 204 21);
+ --color-warning-strong: rgb(234 179 8);
+ --color-warning-surface: rgb(253 224 71 / 0.22);
+ --color-warning-border: rgb(250 204 21 / 0.42);
+ --color-warning-glass: rgb(253 224 71 / 0.2);
+ --color-warning-on: rgb(26 18 0);
+
+ --color-success: rgb(34 197 94);
+ --color-success-strong: rgb(22 163 74);
+ --color-success-surface: rgb(22 163 74 / 0.24);
+ --color-success-border: rgb(34 197 94 / 0.45);
+ --color-success-on: rgb(210 252 228);
+
+ --color-private: rgb(168 85 247);
+ --color-private-strong: rgb(139 92 246);
+ --color-private-surface: rgb(124 58 237 / 0.26);
+ --color-private-border: rgb(168 85 247 / 0.45);
+ --color-private-on: rgb(239 230 255);
+
+ --color-neutral-700: rgb(58 75 110);
+ --color-neutral-600: rgb(90 105 133);
+ --color-neutral-surface: rgb(99 114 144 / 0.24);
+ --color-neutral-border: rgb(99 114 144 / 0.35);
+ --color-neutral-on: rgb(210 220 238);
+
+ --color-white: rgb(255 255 255);
+ --color-black: rgb(0 0 0);
+
+ --color-overlay: rgb(8 11 20 / 0.72);
+ --color-overlay-black: rgb(0 0 0 / 0.88);
+ --color-overlay-muted: rgb(12 18 30 / 0.6);
+ --color-overlay-strong: rgb(8 12 24 / 0.82);
+ --color-overlay-darker: rgb(5 8 16 / 0.9);
+ --color-overlay-panel: rgb(14 20 34 / 0.92);
+ --color-overlay-panel-soft: rgb(18 26 42 / 0.78);
+ --color-overlay-panel-tint: rgb(56 93 160 / 0.36);
+ --color-overlay-panel-glass: rgb(14 24 42 / 0.86);
+ --color-overlay-panel-glass-soft: rgb(16 28 48 / 0.72);
+ --color-overlay-panel-gradient-start: rgb(18 26 44 / 0.92);
+ --color-overlay-panel-gradient-end: rgb(10 16 30 / 0.92);
+ --color-modal-backdrop: rgb(5 8 14 / 0.68);
+ --color-modal-surface: rgb(14 22 38 / 0.88);
+ --color-overlay-veil: rgb(4 6 12 / 0.94);
+ --color-overlay-banner-bottom: rgb(0 0 0 / 0.6);
+ --color-overlay-banner-transparent: rgb(0 0 0 / 0);
+ --color-overlay-backdrop: rgb(5 8 14 / 0.75);
+
+ --scrollbar-track: color-mix(
+ in srgb,
+ var(--color-sidebar-surface-alt) 54%,
+ transparent
+ );
+ --scrollbar-thumb: color-mix(in srgb, var(--color-accent) 72%, transparent);
+ --scrollbar-thumb-hover: color-mix(
+ in srgb,
+ var(--color-accent-strong) 84%,
+ transparent
+ );
+
+ --color-sidebar-surface: rgb(12 18 30 / 0.94);
+ --color-sidebar-surface-alt: rgb(10 18 32 / 0.8);
+ --color-sidebar-border: rgb(86 106 142 / 0.26);
+ --color-sidebar-border-strong: rgb(112 133 170 / 0.42);
+ --color-sidebar-hover: color-mix(
+ in srgb,
+ var(--color-accent) 22%,
+ transparent
+ );
+ --color-sidebar-hover-strong: color-mix(
+ in srgb,
+ var(--color-accent-strong) 32%,
+ transparent
+ );
+ --color-sidebar-glow: color-mix(
+ in srgb,
+ var(--color-accent) 42%,
+ transparent
+ );
+ --color-sidebar-accent-start: color-mix(
+ in srgb,
+ var(--color-accent) 92%,
+ transparent
+ );
+ --color-sidebar-accent-end: color-mix(
+ in srgb,
+ var(--color-accent-strong) 88%,
+ transparent
+ );
+ --color-sidebar-text-muted: var(--color-text-muted);
+ --sidebar-icon-filter: brightness(0) invert(1);
+
+ --color-surface-tint-subtle: rgb(94 113 161 / 0.12);
+ --color-border-translucent: rgb(99 114 144 / 0.22);
+ --color-border-translucent-strong: rgb(110 130 170 / 0.28);
+ --color-border-translucent-bright: rgb(148 163 184 / 0.35);
+ --color-border-translucent-stronger: rgb(148 163 184 / 0.38);
+ --color-border-translucent-strongest: rgb(198 207 222 / 0.45);
+ --color-border-translucent-glow: rgb(129 140 248 / 0.55);
+ --color-border-translucent-medium: rgb(99 114 144 / 0.28);
+ --color-border-neutral-soft: rgb(99 114 144 / 0.3);
+ --color-border-info-soft: rgb(96 165 250 / 0.35);
+ --color-border-sidebar-strong: rgb(32 46 68 / 0.88);
+
+ --color-ring-private: rgb(168 85 247 / 0.55);
+ --color-ring-private-hover: rgb(192 132 252 / 0.65);
+ --color-ring-critical: rgb(239 83 98 / 0.42);
+ --color-ring-critical-soft: rgb(239 83 98 / 0.35);
+ --color-ring-critical-hover: rgb(239 83 98 / 0.5);
+ --color-ring-critical-strong: rgb(220 38 38 / 0.6);
+ --color-ring-alert: rgb(220 38 38 / 0.6);
+
+ --color-gradient-visibility-start: rgb(129 140 248 / 0.4);
+ --color-gradient-visibility-end: rgb(192 132 252 / 0.32);
+
+ --color-white-soft: rgb(255 255 255 / 0.1);
+ --color-white-softer: rgb(255 255 255 / 0.3);
+ --color-white-softest: rgb(255 255 255 / 0.4);
+
+ --color-shadow-floating: rgb(8 11 30 / 0.55);
+ --color-shadow-elevated: rgb(8 11 30 / 0.45);
+ --color-shadow-panel: rgb(15 23 42 / 0.35);
+ --color-shadow-notification: rgb(15 23 42 / 0.3);
+ --color-shadow-intense: rgb(250 204 21 / 0.48);
+ --color-shadow-sidebar: rgb(0 0 0 / 0.45);
+ --color-shadow-modal: rgb(8 11 30 / 0.55);
+
+ --color-divider-strong: rgb(15 23 42 / 0.35);
+ --color-text-frosted-strong: rgb(226 232 240 / 0.94);
+ --color-text-frosted: rgb(226 232 240 / 0.9);
+ --color-text-frosted-soft: rgb(226 232 240 / 0.82);
+}
diff --git a/dist/docs/auth-architecture.md b/dist/docs/auth-architecture.md
new file mode 100644
index 00000000..a5135dcb
--- /dev/null
+++ b/dist/docs/auth-architecture.md
@@ -0,0 +1,138 @@
+# Auth architecture overview
+
+This document consolidates how bitvid authentication works today, with a focus on
+`js/services/authService.js` and the provider implementations in
+`js/services/authProviders/`. It complements the storage details in
+[`docs/nostr-auth.md`](nostr-auth.md) and the remote signer specifics in
+[`docs/nip46-remote-signers.md`](nip46-remote-signers.md).
+
+## Core building blocks
+
+- **AuthService (`js/services/authService.js`)** orchestrates login/logout flows,
+ maintains the active identity, updates saved profile storage, and emits auth
+ events for the rest of the app.
+- **Auth providers (`js/services/authProviders/`)** are pluggable adapters that
+ implement `login()` for a specific signing strategy:
+ - `nip07` (browser extension signer)
+ - `nsec` (direct/private key signer stored locally)
+ - `nip46` (remote signer via Nostr Connect)
+- **State + storage** lives in `js/state/appState.js` and `js/state/cache.js`,
+ backed by `localStorage` keys described in `docs/nostr-auth.md`.
+
+## AuthService responsibilities
+
+### Provider selection and normalization
+
+`AuthService.requestLogin()` is the entry point for logins. It:
+
+1. Normalizes the requested provider id (defaults to `nip07`).
+2. Calls the provider’s `login()` method with the active `nostrClient` and
+ provider-specific options.
+3. Normalizes the provider result into `{ pubkey, authType, signer }`.
+4. For NIP-07, requests extension permissions before continuing.
+5. Either returns the normalized result (when `autoApply: false`) or calls
+ `login()` to apply the identity.
+
+### Applying a login
+
+`AuthService.login(pubkey, options)` is responsible for applying the session:
+
+- **Identity + session state**
+ - Normalizes the pubkey to hex, writes it to `appState` (`setPubkey`) and
+ stores the bech32 `npub` (`setCurrentUserNpub`).
+ - Updates `nostrClient.pubkey` so downstream services use the new identity.
+- **Saved profile persistence**
+ - Reads + updates the saved profile list in `js/state/cache.js`.
+ - Persists `bitvid:savedProfiles:v1` with the latest `authType` + `providerId`.
+ - Ensures there is an `activePubkey` entry when `persistActive` is true.
+- **Post-login hydration**
+ - Kicks off async profile/block/relay loading via `applyPostLoginState()` and
+ emits `auth:post-login` for consumers (UI updates, etc.).
+
+### Logout and profile switching
+
+- `logout()` clears the active pubkey/npub, resets moderation + caches, and
+ keeps the saved profile list intact so users can quickly re-auth.
+- `switchProfile()` replays the login flow for a previously saved pubkey and
+ moves it to the front of the saved list.
+
+## Provider flows
+
+### NIP-07 (browser extension signer)
+
+- Implemented by `js/services/authProviders/nip07.js`.
+- Delegates `login()` to `nostrClient.login()` and expects a pubkey (and optional
+ signer) in the result.
+- After provider login, `AuthService` requests extension permissions before
+ completing the session. Permission failure aborts the login.
+
+**Key behavior:** signing stays inside the browser extension; bitvid only stores
+pubkey metadata in `localStorage`.
+
+### nsec (local signer)
+
+- Implemented by `js/services/authProviders/nsec.js`.
+- Supports two modes:
+ - **Unlock stored key** (`unlockStored: true`): uses
+ `nostrClient.unlockStoredSessionActor()` and requires a passphrase.
+ - **Direct secret**: derives a key from an `nsec`, hex key, or seed via
+ `nostrClient.derivePrivateKeyFromSecret()` and registers a local signer with
+ `nostrClient.registerPrivateKeySigner()`.
+- Can optionally persist the encrypted key on the device; authService still only
+ stores public metadata in the saved profile list.
+
+**Key behavior:** signing happens locally in the browser with a derived private
+key; storage of the private key is optional and encrypted when persisted.
+
+### NIP-46 (remote signer / Nostr Connect)
+
+- Implemented by `js/services/authProviders/nip46.js`.
+- Supports three paths:
+ - **Reuse stored session** (`reuseStored: true`): use
+ `nostrClient.useStoredRemoteSigner()` to resume the saved NIP-46 session.
+ - **Manual connection** (`mode: "manual"`): use a provided
+ `connectionString` (e.g., `nostrconnect://` or `bunker://`).
+ - **Handshake flow** (`mode: "handshake"`, default): generate a handshake via
+ `nostrClient.prepareRemoteSignerHandshake()` and then connect using the
+ returned connection string + client keypair.
+
+**Key behavior:** signing happens on a remote device. Session material is stored
+in `bitvid:nip46:session:v1` as described in
+[`docs/nip46-remote-signers.md`](nip46-remote-signers.md).
+
+## Session state + persistence
+
+Auth state is intentionally small and split across caches:
+
+- **Active identity:** `js/state/appState.js` keeps the current `pubkey` + `npub`
+ in memory and updates `nostrClient.pubkey` on login.
+- **Saved profiles:** `js/state/cache.js` manages
+ `bitvid:savedProfiles:v1`, including `authType` + `providerId` for each entry.
+ See [`docs/nostr-auth.md`](nostr-auth.md) for the schema and migration notes.
+- **Profile cache:** `bitvid:profileCache:v1` is used to show display names +
+ avatars quickly; it is updated during `loadOwnProfile()` calls.
+- **Remote signer session:** `bitvid:nip46:session:v1` stores handshake/session
+ data for NIP-46 reconnects. See
+ [`docs/nip46-remote-signers.md`](nip46-remote-signers.md) for details.
+
+## NIP-04 / NIP-44 considerations
+
+AuthService and the provider adapters do **not** implement NIP-04 or NIP-44
+message encryption/decryption directly. They simply supply a pubkey and (when
+available) a signer object back to the caller. When other features (like direct
+messages) need NIP-04 or NIP-44 capabilities, they rely on the active signer
+implementation on the `nostrClient`. Remote signers and extensions must support
+those encryption methods for DM features to work, while local `nsec` signers can
+provide the primitives directly.
+
+Signing/encryption requests always flow through the signer adapter registry in
+`js/nostr/client.js` (accessed via `js/nostrClientFacade.js`). The registry
+selects the active signer, falls back to the strongest supported capability, and
+triggers permission prompts (for example, the NIP-07 extension handshake) before
+attempting privileged calls.
+
+## Related docs
+
+- [`docs/nostr-auth.md`](nostr-auth.md)
+- [`docs/nip46-remote-signers.md`](nip46-remote-signers.md)
+- [`docs/signing-adapter.md`](signing-adapter.md)
diff --git a/dist/docs/beacon/css-mapping.md b/dist/docs/beacon/css-mapping.md
new file mode 100644
index 00000000..995e6757
--- /dev/null
+++ b/dist/docs/beacon/css-mapping.md
@@ -0,0 +1,43 @@
+# Beacon vendor CSS migration
+
+This inventory captures the selectors that mattered in `torrent/dist/beacon.vendor.css` and how they now map to design-system driven rules. The goal is to keep future tweaks aligned with shared tokens rather than re-introducing ad-hoc styles or vendor bundles.
+
+> **Contributor note:** Beacon CSS updates must follow the [“Styling & Theming Rules (token-first)” guidance in `AGENTS.md`](../../AGENTS.md#styling--theming-rules-token-first) and the [README CSS build pipeline](../../README.md#css-build-pipeline). Run the relevant scripts before committing changes—at minimum `npm run lint:css`, `npm run build`, and `npm run build:beacon` to ensure the Tailwind output and bundled assets stay in sync with token rules.
+
+## Angular UI Grid
+
+| Legacy selector(s) | Tailwind component mapping | Notes |
+| --- | --- | --- |
+| `.ui-grid`, `.ui-grid-render-container`, `.ui-grid-contents-wrapper` | `.ui-grid` block in `css/tailwind.source.css` | Uses shared border/box styling via `--grid-border-width`, preserving the translated container shell. |
+| `.ui-grid-top-panel-background`, `.ui-grid-footer-panel-background`, `.ui-grid-header`, `.ui-grid-top-panel` | Same block | Backgrounds and dividers now pull from `var(--color-surface-alt)` and `var(--color-border-translucent-medium)`. |
+| `.ui-grid-header-viewport`, `.ui-grid-footer-viewport`, `.ui-grid-header-canvas`, `.ui-grid-footer-canvas`, `.ui-grid-header-cell-wrapper`, `.ui-grid-footer-cell-wrapper`, `.ui-grid-header-cell-row`, `.ui-grid-footer-cell-row` | Same block | Table layout and overflow behaviour carried over verbatim. |
+| `.ui-grid-header-cell`, `.ui-grid-footer-cell`, `.ui-grid-header-cell .sortable`, `.ui-grid-header-cell .ui-grid-sort-priority-number` | Same block | Header typography now keyed off `--grid-header-font-size` and `--grid-header-letter-spacing`; sortable affordances reference spacing tokens. |
+| `.ui-grid-sortarrow`, `.ui-grid-sortarrow.down`, (icon font triangle) | `.ui-grid-sortarrow` + pseudo-element | Arrow is now rendered with CSS borders driven by `--grid-sort-indicator-*` tokens, eliminating the ui-grid icon font. |
+| `.ui-grid-vertical-bar` + child selectors | Same block | Divider widths reuse the shared border width token. |
+| `.ui-grid-viewport`, `.ui-grid-canvas` | Same block | Min heights and padding resolve through grid tokens instead of literal px. |
+| `.ui-grid-row`, row parity/hover/last-child selectors, `.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell` | Same block | Alternating row fills reference surface tokens and preserve selection colours. |
+| `.ui-grid-cell`, `.ui-grid-cell:last-child`, `.ui-grid-cell-contents`, `.ui-grid-cell-contents-hidden` | Same block | Cell padding now uses `--grid-cell-padding-*`; hidden content helper retained. |
+| `.ui-grid-cell-focus`, `.ui-grid-focuser`, `.ui-grid-offscreen` | Same block | Focus handling switches to tokenised shadows while keeping accessibility helpers. |
+| `.ui-grid-no-row-overlay`, `.ui-grid-no-row-overlay > *` | Same block | Empty-state panel adopts design-system surface/background tokens. |
+| `.ui-grid-menu-button`, `.ui-grid-menu` | Same block | Menu chrome now uses shared spacing, shadows, and border tokens. |
+| `.ui-grid-column-resizer`, `.ui-grid.column-resizing`, `.ui-grid.column-resizing .ui-grid-resize-overlay` | Same block | Resizer hit boxes use `--grid-resizer-width`; overlay colour references translucent border tokens. |
+| `.ui-grid-row-saving .ui-grid-cell`, `.ui-grid-row-dirty .ui-grid-cell`, `.ui-grid-row-error .ui-grid-cell` | Same block | Status colours mapped to `var(--color-muted-strong)`, `var(--color-warning-strong)`, and `var(--color-critical-strong)`. |
+| `.ui-grid-disable-selection` | Same block | Still prevents text selection with consistent cursor feedback. |
+| `.ui-grid-animate-spin`, `@keyframes ui-grid-spin` | Same block | Animation now hooks into the global motion duration token. |
+
+> **Omitted vendor selectors:** Column menus, tree, filter icons, and other ui-grid extension classes remain unused in the beacon routes, so the icon font `@font-face` payload was intentionally dropped.
+
+## ng-notify
+
+| Legacy selector(s) | Tailwind component mapping | Notes |
+| --- | --- | --- |
+| `.ngn`, `.ngn.ngn-visible`, `.ngn.ngn-enter-active`, `.ngn.ngn-leave-active` | `.ngn` block in `css/tailwind.source.css` | Layout, typography, and z-index now rely on `--notify-*` and `--z-notify`. Pointer-events handling mirrors vendor behaviour. |
+| `.ngn-top`, `.ngn-bottom`, `.ngn-component` | Same block | Placement helpers rewritten with logical properties (`inset-block-*`). |
+| `.ngn-dismiss`, `.ngn-sticky .ngn-dismiss`, `.ngn-dismiss:hover`, `.ngn-dismiss:active` | Same block | Close button sizing derives from tokens; hover/active states use `color-mix` against overlay tokens. |
+| `.ngn-info`, `.ngn-error`, `.ngn-success`, `.ngn-warn`, `.ngn-grimace` | Same block | Severity palettes tie directly into existing info/warning/critical tokens. |
+| `.ngn-prime.*`, `.ngn-pastel.*`, `.ngn-pitchy.*` | Same block | Theme variants blend design-system colours via `color-mix`, preserving tonal differences without hard-coded hex values. |
+| `@media (max-width: 30rem)` overrides | Same block | Compact sizing switches to shared spacing and font-size tokens. |
+
+## Font faces
+
+The legacy bundle shipped three `@font-face` blocks for the `ui-grid` icon font. Sort indicators and menu affordances now render through CSS borders and shared tokens, so the icon font is no longer required or embedded in the Tailwind build.
diff --git a/dist/docs/bitvid-app-audit.md b/dist/docs/bitvid-app-audit.md
new file mode 100644
index 00000000..1268de50
--- /dev/null
+++ b/dist/docs/bitvid-app-audit.md
@@ -0,0 +1,25 @@
+# Application Responsibility Audit
+
+This document catalogs the major responsibilities still implemented inside `Application` (formerly `bitvidApp`). Each area is a candidate for future extraction into dedicated service or UI modules.
+
+## Auth & Profile Coordination
+- Instantiates `AuthService`, wires login/logout/profile listeners, and exposes helper methods for cached profile state management.【F:js/app.js†L221-L314】【F:js/app.js†L620-L772】
+- Manages profile modal lifecycle, navigation between panes, and account switching UI state.【F:js/app.js†L283-L420】【F:js/app.js†L1328-L1822】
+
+## Playback Orchestration
+- Configures `PlaybackService`, logs telemetry callbacks, and tracks the active playback session lifecycle.【F:js/app.js†L224-L323】【F:js/app.js†L2805-L3352】
+- Coordinates view logging, cooldown keys, and watch-count subscriptions for the primary player and modal overlays.【F:js/app.js†L4305-L4592】【F:js/app.js†L4972-L5332】
+
+## Modal & UI Composition
+- Constructs upload, edit, revert, and video modals; registers their event listeners; and bridges UI events back into application logic.【F:js/app.js†L340-L615】【F:js/app.js†L2382-L2799】
+- Builds and manages the `VideoListView` component, injecting helpers for health badges, share links, and context menu actions.【F:js/app.js†L516-L744】【F:js/app.js†L2149-L2376】
+
+## Routing & View Bootstrapping
+- Handles initial view loading, hash-based navigation, and video list mounting during application startup.【F:js/app.js†L903-L959】【F:js/app.js†L1932-L2124】
+- Provides navigation helpers for channel/profile transitions tied to hash routing.【F:js/app.js†L934-L968】
+
+## State & Watch History Management
+- Synchronizes watch-history preferences, local metadata caching, and publication of watch history events to services.【F:js/app.js†L1975-L2093】【F:js/app.js†L4087-L4478】
+- Tracks app-level state such as active intervals, cleanup routines, view counters, and URL/magnet health caches.【F:js/app.js†L200-L323】【F:js/app.js†L3354-L4075】
+
+These clusters outline the remaining cross-cutting responsibilities that can be incrementally migrated into focused modules under `js/services` and `js/ui`.
diff --git a/dist/docs/cancelling-ci-runs.md b/dist/docs/cancelling-ci-runs.md
new file mode 100644
index 00000000..7d2276e3
--- /dev/null
+++ b/dist/docs/cancelling-ci-runs.md
@@ -0,0 +1,53 @@
+# Cancelling CI Runs
+
+This document explains how to use the `scripts/cancel-all-ci-runs.sh` script to cancel pending or in-progress CI workflows. This is useful when you have a backlog of runs that are no longer needed.
+
+## Prerequisites
+
+- **GitHub CLI (`gh`)**: You must have the GitHub CLI installed and authenticated.
+ - Install: [GitHub CLI Installation Guide](https://github.com/cli/cli#installation)
+ - Authenticate: `gh auth login`
+
+## Usage
+
+### Basic Usage (Repo Root)
+
+From the root of the repository, you can simply run:
+
+```bash
+./scripts/cancel-all-ci-runs.sh
+```
+
+The script will automatically detect the repository from your git configuration.
+
+### Running from Anywhere
+
+You can run the script from any directory by setting the `REPO` environment variable:
+
+```bash
+REPO=PR0M3TH3AN/bitvid ./scripts/cancel-all-ci-runs.sh
+```
+
+### Previewing Runs
+
+Before cancelling, you might want to see which runs are currently active. You can use the following commands:
+
+```bash
+# List in-progress runs
+gh run list --repo PR0M3TH3AN/bitvid --status in_progress --limit 1000 --json databaseId,headBranch,name,createdAt | jq .
+
+# List queued runs
+gh run list --repo PR0M3TH3AN/bitvid --status queued --limit 1000 --json databaseId,headBranch,name,createdAt | jq .
+```
+
+## How it Works
+
+The script performs the following steps:
+1. Checks if `gh` is installed.
+2. Determines the repository (either from `REPO` env var or `gh repo view`).
+3. Fetches IDs of all runs with status `in_progress` and `queued`.
+4. Cancels them one by one using `gh run cancel`.
+
+### Why use this script?
+
+Trying to cancel runs in bulk using `xargs gh run cancel` directly can fail because some versions of `gh` only accept a single run ID per invocation. This script uses `xargs -n1` to ensure `gh run cancel` is called individually for each run ID, preventing "accepts at most 1 arg(s)" errors.
diff --git a/dist/docs/comment-threading.md b/dist/docs/comment-threading.md
new file mode 100644
index 00000000..c697bf0a
--- /dev/null
+++ b/dist/docs/comment-threading.md
@@ -0,0 +1,116 @@
+# Comment threads & discussion counts (Nostr → UI flow)
+
+This note documents how bitvid turns Nostr comment events into UI comment threads and discussion counts. The primary implementations live in:
+
+- `js/services/commentThreadService.js` (comment thread hydration + caching)
+- `js/services/discussionCountService.js` (NIP-45 count queries + DOM updates)
+
+## Comment thread flow (`CommentThreadService`)
+
+### Data sources
+
+`CommentThreadService` is the single place that fetches and subscribes to comment events for a video. It relies on the injected `nostrClient` APIs:
+
+- `fetchVideoComments(target, options)` for the initial thread load.
+- `subscribeVideoComments(target, options)` to keep the thread up to date in real time.
+
+The service builds a `target` payload using the current video metadata:
+
+- `videoEventId` (event id)
+- `videoDefinitionAddress` from `buildVideoAddressPointer(video)`
+- `videoKind`
+- `videoAuthorPubkey`
+- `rootIdentifier` / `rootIdentifierRelay` (derived from `video.videoRootId`, pointer identifiers, or tag data)
+- optional `parentCommentId` context when fetching a reply thread
+
+Internally, it also infers parentage from the incoming comment events by looking at `e` tags; the most recent `e` tag that is **not** the video event id becomes the parent comment id for threading. It also watches for the `i` tag to update root identifier and relay details.
+
+### Caching
+
+When `FEATURE_IMPROVED_COMMENT_FETCHING` is enabled, comment events are cached in `localStorage`:
+
+- Key format: `bitvid:comments:`
+- TTL: 5 minutes
+- Versioned schema: `COMMENT_CACHE_VERSION = 2`
+
+Cache usage is simple: load from cache during `loadThread`, and write the latest event list after thread updates. Cache diagnostics (`commentCacheDiagnostics.storageUnavailable`) are surfaced to consumers to indicate storage issues.
+
+### Polling & refresh
+
+There is **no polling loop** for comments. Refresh happens through:
+
+1. A one-time fetch via `fetchVideoComments` during `loadThread`.
+2. A live subscription via `subscribeVideoComments`, which streams new comments into the thread.
+
+Profile hydration for comment authors is batched and debounced (default 25ms), with up to three retry attempts and a backoff delay between attempts.
+
+### UI surfacing
+
+`VideoModalCommentController` owns the comment UI and subscribes to `CommentThreadService` callbacks:
+
+- `onThreadReady` → full thread render
+- `onCommentsAppended` → incremental updates
+- `onError` → status messaging
+
+The controller translates the thread snapshot into UI state for the modal and uses the comment thread’s profile cache to annotate authors.
+
+### Telemetry/logging
+
+All comment-thread telemetry is routed through `logger.dev`/`logger.user` (no direct console logging). The service emits warnings for:
+
+- Nostr client failures (fetch/subscribe)
+- Comment cache read/write errors
+- Profile hydration retries and failures
+
+## Discussion count flow (`DiscussionCountService`)
+
+### Data sources
+
+`DiscussionCountService` uses NIP-45 COUNT queries to count comment events across relays. It requires a Nostr client that exposes:
+
+- `nostrClient.pool` (relay pool)
+- `nostrClient.countEventsAcrossRelays(filters)`
+
+### Filters & event kinds
+
+The service builds COUNT filters based on the current video metadata. The base event kind is `COMMENT_EVENT_KIND` (video comment kind). Filters include:
+
+- `#E` (root event id)
+- `#A` (address pointer from `buildVideoAddressPointer(video)`)
+- `#I` (root identifier / videoRootId)
+- `#K` (root kind)
+- `#P` (root author)
+
+It always tries an `#E` filter first, then constructs an uppercase-tag filter that uses the best available pointer information, and finally a lowercase `#A` filter when available.
+
+### Caching
+
+Counts are cached in-memory per video id during a session:
+
+- `videoDiscussionCountCache` stores resolved counts.
+- `inFlightDiscussionCounts` deduplicates concurrent requests.
+
+There is no persistence beyond the runtime session.
+
+### Polling & refresh
+
+Discussion counts are not polled on a timer. They refresh when the UI asks for them (typically after feed renders). The application triggers refreshes via `app.refreshVideoDiscussionCounts`, which is wired into video list rendering flows.
+
+### UI surfacing
+
+The service updates DOM nodes directly using data attributes:
+
+- Root node: `[data-discussion-count=""]`
+- Count value: `[data-discussion-count-value]`
+
+The element’s `data-count-state` is set to:
+
+- `pending` while a COUNT request is in flight
+- `ready` after a successful response
+- `unsupported` or `error` when COUNT is unavailable or fails
+
+If relay support is missing, the service sets a tooltip (`title`) explaining that COUNT is unsupported.
+
+### Telemetry/logging
+
+Failures to fetch counts are logged through the injected logger (default `devLogger.warn`), and the UI falls back to the `error`/`unsupported` state rather than throwing.
diff --git a/dist/docs/deployment-notes.md b/dist/docs/deployment-notes.md
new file mode 100644
index 00000000..cd40b221
--- /dev/null
+++ b/dist/docs/deployment-notes.md
@@ -0,0 +1,7 @@
+# Deployment Notes
+
+## Design system rollout
+
+- **Status:** The design system styling is always active. The former `FEATURE_DESIGN_SYSTEM` runtime flag has been removed, so there is no rollback toggle during deployment.
+- **Template contract:** Every layout, view, and partial must keep `data-ds` on its root element. The entrypoint stamps `data-ds="new"` during bootstrap so controllers inherit the correct primitives.
+- **Controllers:** UI controllers still receive a `designSystem` context, but `context.isNew()` now always returns `true`. Use the context for consistency, but do not branch on legacy styling paths.
diff --git a/dist/docs/design-system.md b/dist/docs/design-system.md
new file mode 100644
index 00000000..7761c42e
--- /dev/null
+++ b/dist/docs/design-system.md
@@ -0,0 +1,493 @@
+# bitvid Design System Primitives
+
+bitvid's visual language is now powered by Tailwind utilities backed by our design tokens. This document lists the primitives available via `css/tailwind.source.css`, how they behave across states, and when to mix them with Tailwind utilities.
+
+All templates and embeds must load `css/tailwind.generated.css`; that compiled bundle is the only stylesheet shipped with the app. The file is generated during CI/Netlify deploys (and remains gitignored locally), so commit only the source styles that feed the build. Remove any lingering references to legacy `tailwind.min.css` assets when porting surfaces into the design system.
+
+> **UI Styling:** For day-to-day decisions, start with the [Styling & Theming Rules](../AGENTS.md#styling--theming-rules-token-first) in `AGENTS.md` and the [CSS build pipeline overview](../README.md#css-build-pipeline). Run `npm run lint:css` before committing so design-token regressions are caught early.
+
+## Runtime contract
+
+The design system is now the canonical styling path across bitvid—there is no runtime flag or rollback toggle. Every template renders with `data-ds="new"` on its root container, and controllers always receive the "new" mode from the `designSystem` context (see `js/designSystem.js`). When migrating surfaces, ensure their root nodes include `data-ds` so the entrypoint can stamp the attribute during bootstrap.
+
+## Dynamic runtime styling
+
+Inline styles are blocked in production builds, so runtime components that need bespoke coordinates or measurements must route their overrides through `js/designSystem/dynamicStyles.js`.
+
+- `registerScope(id, selectors)` creates (or reuses) a constructable stylesheet when supported, allocates a unique identifier, and injects empty rules scoped to `[data-ds-style-id=""]`. Callers attach the attribute to any element that should inherit those rules.
+- `setVariables(id, tokens)` updates CSS custom properties on the registered scope. Pass CSS variable names (for example, `"--ds-metric-probe-length"`) and string or number values—`setVariables` handles serialization and removes entries when they resolve to empty strings.
+- `releaseScope(id)` removes the generated rules and frees the identifier. Always invoke it from component teardown paths to avoid leaking rules between renders.
+
+Design-system metrics lean on this helper to keep runtime measurements inline-style free:
+
+- `readDesignTokenAsPixels` measures non-`px`/`rem` tokens with an offscreen probe that ships in core CSS (`.ds-metric-probe`). The probe is registered through the helper so dynamic lengths are fed into `--ds-metric-probe-length` without touching inline styles.
+
+When introducing a new runtime feature that requires dynamic styling:
+
+1. Register a dedicated scope during setup and attach the returned attribute to the relevant DOM node.
+2. Update custom properties with `setVariables` instead of touching `.style` or appending `
+
+
+
+ Moderation Test Fixtures
+
+ These scenarios mirror the QA vectors in
+ docs/moderation/testing.md so automated checks can assert
+ blur thresholds, autoplay blocking, and local override persistence.
+
+
+
+
+ 
+