/* Shared UI, local fonts and native Gitea overrides. The three palettes are separate themes. */
:root {
  --font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonts-regular: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-primary: var(--ff-accent);
  --color-primary-hover: var(--ff-accent-hover);
  --color-primary-active: var(--ff-accent-hover);
  --color-primary-dark-1: var(--ff-accent-hover);
  --color-primary-light-5: var(--ff-tint);
  --color-primary-light-6: var(--ff-tint);
  --color-primary-light-7: var(--ff-tint);
  --color-primary-alpha-10: color-mix(in srgb, var(--ff-accent) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--ff-accent) 20%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--ff-accent) 40%, transparent);
  --color-secondary: var(--ff-line);
  --color-secondary-dark-1: var(--ff-line);
  --color-secondary-dark-2: color-mix(in srgb, var(--ff-line) 85%, var(--ff-text));
  --color-secondary-light-1: var(--ff-line);
  --color-secondary-light-2: var(--ff-line);
  --color-secondary-light-3: var(--ff-sidebar);
  --color-body: var(--ff-bg);
  --color-text: var(--ff-text);
  --color-text-light: var(--ff-muted);
  --color-text-light-1: var(--ff-muted);
  --color-text-light-2: var(--ff-muted);
  --color-text-light-3: var(--ff-muted);
  --color-box-body: var(--ff-panel);
  --color-box-header: var(--ff-sidebar);
  --color-navbar: var(--ff-panel);
  --color-menu: var(--ff-panel);
  --color-input-background: var(--ff-panel);
  --color-input-text: var(--ff-text);
  --color-input-border: var(--ff-line);
  --color-input-border-hover: var(--ff-accent);
  --color-light: color-mix(in srgb, var(--ff-text) 3%, transparent);
  --color-hover: color-mix(in srgb, var(--ff-accent) 7%, transparent);
  --color-active: color-mix(in srgb, var(--ff-accent) 11%, transparent);
  --color-label-bg: var(--ff-tint);
  --color-label-text: var(--ff-accent);
  --color-markup-code-block: var(--ff-code-bg);
}
html, body { background: var(--ff-bg); }
body, button, input, textarea, select { font-family: var(--fonts-regular); }
::selection { background: var(--ff-tint); color: var(--ff-accent); }
.ff-icon { width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ff-home, .ff-home * { box-sizing: border-box; }
.ff-home a, .ff-worldbar a { text-decoration: none; }
.ff-home a { color: inherit; }
.ff-home a:hover { color: var(--ff-accent); }
.ff-home button, .ff-worldbar button { cursor: pointer; }
.ff-home button:focus-visible, .ff-home a:focus-visible, .ff-worldbar button:focus-visible { outline: 2px solid var(--ff-accent); outline-offset: 4px; }
.ff-home-mode #navbar, .ff-home-mode .ff-worldbar, .ff-home-mode footer:not(.ff-home-footer) { display: none; }
.ff-home-mode .full.height { min-height: 100vh; }
.ff-home { display: grid; grid-template-columns: 230px minmax(0, 1fr); margin: 0; padding: 0; color: var(--ff-text); min-height: 100vh; }
.ff-sidebar { background: var(--ff-sidebar); border-right: 1px solid var(--ff-line); padding: 30px 20px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; min-height: 780px; }
.ff-brand { display: flex; align-items: center; gap: 10px; padding: 0 5px; font-size: 22px; font-weight: 760; letter-spacing: -.9px; line-height: 1.2; }
.ff-brand-symbol { width: 39px; height: 43px; display: grid; place-items: center; color: var(--ff-accent); position: relative; }
.ff-brand-symbol::before { content: ""; position: absolute; inset: 5px; transform: rotate(-12deg); background: var(--ff-tint); border-radius: 11px; }
.ff-brand-symbol .ff-icon { position: relative; width: 34px; height: 34px; }
.ff-brand-sub { display: block; font-size: 7px; font-weight: 700; letter-spacing: 1.45px; margin-top: 6px; color: var(--ff-muted); }
.ff-workspace { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ff-line); border-radius: 12px; padding: 12px 10px; margin: 33px 0 29px; background: color-mix(in srgb, var(--ff-panel) 55%, transparent); }
.ff-workspace-avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: var(--ff-accent); background: var(--ff-tint); font-size: 20px; font-weight: 650; }
.ff-workspace div { min-width: 0; }
.ff-workspace strong { display: block; font-size: 12px; font-weight: 650; }
.ff-workspace div > span { color: var(--ff-muted); font-size: 10px; display: block; margin-top: 3px; }
.ff-workspace > .ff-icon { width: 14px; height: 14px; margin-left: auto; color: var(--ff-muted); }
.ff-nav-label { color: var(--ff-muted); font-size: 8px; font-weight: 700; letter-spacing: 1.75px; padding-left: 13px; margin-bottom: 12px; }
.ff-side-nav { display: grid; gap: 5px; }
.ff-side-nav a { display: flex; gap: 12px; align-items: center; height: 43px; padding: 0 13px; border-radius: 10px; font-size: 12px; font-weight: 550; color: var(--ff-muted); }
.ff-side-nav a > .ff-icon { width: 17px; height: 17px; }
.ff-side-nav a:hover { background: color-mix(in srgb, var(--ff-accent) 6%, transparent); }
.ff-side-nav a.is-active { background: var(--ff-tint); color: var(--ff-accent); font-weight: 700; }
.ff-nav-spark { margin-left: auto; font-size: 15px; }
.ff-side-count { margin-left: auto; font-size: 10px; border-radius: 5px; padding: 2px 6px; background: color-mix(in srgb, var(--ff-muted) 10%, transparent); }
.ff-favorites-label { margin-top: 34px; }
.ff-favorites { display: grid; gap: 15px; padding: 3px 12px; }
.ff-favorites a { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ff-muted); }
.ff-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--ff-accent); }
.ff-dot-lilac { background: var(--ff-accent); }
.ff-dot-pink { background: var(--ff-pink); }
.ff-dot-mint { background: var(--ff-mint); }
.ff-dot-gold { background: var(--ff-gold); }
.ff-sidebar-mood { margin-top: auto; padding: 22px 17px 18px; border: 1px solid color-mix(in srgb, var(--ff-accent) 14%, transparent); background: linear-gradient(135deg, var(--ff-mood), var(--ff-sidebar)); border-radius: 15px; position: relative; overflow: hidden; }
.ff-mini-star { color: var(--ff-accent); font-size: 28px; display: block; margin-bottom: 11px; }
.ff-mood-kicker { color: var(--ff-muted); letter-spacing: 1.1px; font-size: 7px; font-weight: 700; }
.ff-sidebar-mood strong { font-size: 16px; font-weight: 650; line-height: 1.45; display: block; margin: 9px 0; letter-spacing: -.3px; }
.ff-sidebar-mood p { font-size: 10px; line-height: 1.7; color: var(--ff-muted); margin: 0; max-width: 135px; }
.ff-mood-line { position: absolute; width: 80px; height: 80px; border: 1px solid color-mix(in srgb, var(--ff-accent) 20%, transparent); border-radius: 50%; right: -45px; top: -40px; }
.ff-sidebar-bottom { margin-top: 20px; display: flex; gap: 8px; align-items: center; font-size: 9px; color: var(--ff-muted); padding: 0 5px; }
.ff-sidebar-bottom > span:last-child { margin-left: auto; color: var(--ff-accent); font-size: 14px; }
.ff-live-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: var(--ff-mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-mint) 10%, transparent); flex: 0 0 auto; }
.ff-content { min-width: 0; }
.ff-topbar { height: 75px; border-bottom: 1px solid var(--ff-line); display: flex; gap: 24px; align-items: center; padding: 0 36px; background: var(--ff-panel); }
.ff-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ff-muted); }
.ff-breadcrumb .ff-icon { width: 12px; height: 12px; opacity: .65; }
.ff-breadcrumb strong { color: var(--ff-text); font-weight: 550; }
.ff-search { display: flex; align-items: center; gap: 9px; width: 315px; margin-left: auto; border: 1px solid var(--ff-line); border-radius: 9px; height: 36px; padding: 0 11px; color: var(--ff-muted); background: var(--ff-bg); }
.ff-search .ff-icon { width: 14px; height: 14px; }
.ff-search input { background: none; border: none; width: 100%; min-width: 0; color: var(--ff-text); font-size: 10px; outline: none; }
.ff-search input::placeholder { color: var(--ff-muted); opacity: .85; }
.ff-search kbd { font-family: inherit; font-size: 10px; border: 1px solid var(--ff-line); border-radius: 4px; padding: 0 4px; line-height: 18px; }
.ff-account { display: flex; align-items: center; gap: 11px; font-size: 11px; }
.ff-account-avatar { display: grid; place-items: center; color: var(--ff-accent); background: var(--ff-tint); width: 34px; height: 34px; border-radius: 11px; }
.ff-account-avatar .ff-icon { width: 20px; height: 20px; }
.ff-dashboard { padding: 30px 36px 18px; max-width: 1480px; margin: auto; }
.ff-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.ff-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--ff-muted); font-size: 8px; font-weight: 650; letter-spacing: 1.5px; }
.ff-page-heading h1 { font-family: "Onest", sans-serif; font-size: 27px; letter-spacing: -.8px; font-weight: 650; line-height: 1.35; margin: 7px 0 3px; }
.ff-greeting-spark { color: var(--ff-accent); font-weight: 400; margin-left: 3px; }
.ff-page-heading p { font-size: 11px; margin: 0; color: var(--ff-muted); }
.ff-chooser { display: flex; align-items: center; gap: 4px; background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 12px; padding: 4px; color: var(--ff-muted); }
.ff-chooser-label { margin: 0 8px 0 9px; font-size: 9px; color: var(--ff-muted); }
.ff-chooser button { background: none; border: 0; display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 8px; color: var(--ff-muted); font-size: 10px; font-weight: 550; transition: background .18s, color .18s; }
.ff-chooser .ff-icon { width: 14px; height: 14px; }
.ff-chooser button:hover { background: var(--ff-bg); color: var(--ff-text); }
.ff-chooser button[aria-pressed="true"] { background: var(--ff-tint); color: var(--ff-accent); }
.ff-hero { height: 340px; position: relative; overflow: hidden; border-radius: 21px; background: linear-gradient(110deg, var(--ff-hero-a) 0%, var(--ff-hero-b) 64%, var(--ff-hero-c)); border: 1px solid color-mix(in srgb, var(--ff-accent) 11%, transparent); isolation: isolate; }
.ff-hero-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 29px 34px 24px; width: 58%; color: var(--ff-hero-text); }
.ff-world-tag { display: inline-flex; gap: 8px; align-items: center; font-size: 8px; letter-spacing: 1.15px; color: var(--ff-hero-secondary); padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--ff-hero-secondary) 19%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--ff-panel) 22%, transparent); font-weight: 650; }
.ff-world-tag > .ff-icon { width: 13px; height: 13px; }
.ff-world-tag-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ff-hero-secondary); opacity: .7; }
.ff-world-tag > span:last-child { font-size: 7px; opacity: .9; letter-spacing: .8px; }
.ff-hero h2 { font-family: "Onest", sans-serif; font-size: clamp(29px, 2.7vw, 41px); line-height: 1.22; font-weight: 760; letter-spacing: -1.1px; margin: 16px 0 11px; text-wrap: balance; }
.ff-hero h2 span { color: var(--ff-accent); }
.ff-hero-text > p { color: var(--ff-hero-secondary); font-size: 11px; line-height: 1.8; margin: 0; }
.ff-hero-actions { display: flex; gap: 19px; align-items: center; margin-top: 22px; }
.ff-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 10px; font-weight: 600; padding: 12px 15px; white-space: nowrap; }
.ff-button.ff-button-primary { background: var(--ff-accent); color: var(--ff-panel); box-shadow: 0 4px 12px color-mix(in srgb, var(--ff-accent) 20%, transparent); }
.ff-button.ff-button-primary:hover { background: var(--ff-accent-hover); color: var(--ff-panel); transform: translateY(-1px); }
.ff-button .ff-icon { width: 15px; height: 15px; }
.ff-hero-link { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--ff-hero-text); white-space: nowrap; }
.ff-hero-link .ff-icon { width: 15px; height: 15px; }
.ff-hero-caption { display: flex; align-items: center; gap: 7px; font-size: 8px; margin-top: auto; color: var(--ff-hero-secondary); }
.ff-hero-caption > span:first-child { font-size: 12px; color: var(--ff-accent); }
.ff-hero-art { position: absolute; inset: 0 0 0 51%; z-index: 1; pointer-events: none; }
.ff-art-halo { position: absolute; width: 265px; height: 265px; border-radius: 50%; background: var(--ff-halo); top: 10px; right: 80px; opacity: .55; }
.ff-art-ring { position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ff-accent) 13%, transparent); top: -10px; right: 51px; }
.ff-hero-image { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; object-position: center; z-index: 2; padding: 0 13px 20px 0; filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--ff-accent) 14%, transparent)); }
.ff-art-star { position: absolute; color: var(--ff-accent); z-index: 3; font-weight: 300; }
.ff-star-one { left: 7%; top: 11%; font-size: 34px; transform: rotate(-15deg); }
.ff-star-two { right: 9%; top: 11%; font-size: 17px; color: var(--ff-pink); }
.ff-star-three { right: 4%; bottom: 21%; font-size: 37px; }
.ff-star-four { left: 11%; bottom: 25%; font-size: 15px; opacity: .5; }
.ff-floating-label { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 17px; left: 15%; z-index: 4; padding: 10px 13px; background: color-mix(in srgb, var(--ff-panel) 88%, transparent); border: 1px solid color-mix(in srgb, var(--ff-accent) 16%, transparent); border-radius: 11px; color: var(--ff-hero-secondary); box-shadow: 0 6px 20px color-mix(in srgb, var(--ff-accent) 9%, transparent); backdrop-filter: blur(8px); transform: rotate(-3deg); }
.ff-floating-label code { font-size: 9px; font-family: ui-monospace, "Cascadia Code", monospace; background: none; padding: 0; color: var(--ff-text); }
.ff-floating-label > span:last-child { color: var(--ff-pink); font-size: 16px; }
.ff-hero-orbit { position: absolute; width: 330px; height: 330px; border: 1px solid color-mix(in srgb, var(--ff-accent) 9%, transparent); border-radius: 50%; z-index: 0; }
.ff-orbit-one { left: -90px; bottom: -285px; }
.ff-orbit-two { width: 610px; height: 610px; right: -195px; top: -365px; }
.ff-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; margin-bottom: 27px; }
.ff-stat { position: relative; display: flex; align-items: center; gap: 13px; min-height: 89px; background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 13px; padding: 17px 18px; box-shadow: var(--ff-shadow); }
.ff-stat:hover { border-color: color-mix(in srgb, var(--ff-accent) 35%, var(--ff-line)); }
.ff-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ff-tint); color: var(--ff-accent); }
.ff-stat-icon .ff-icon { width: 19px; height: 19px; }
.ff-stat-icon-pink { background: color-mix(in srgb, var(--ff-pink) 13%, transparent); color: var(--ff-pink); }
.ff-stat-icon-mint { background: color-mix(in srgb, var(--ff-mint) 13%, transparent); color: var(--ff-mint); }
.ff-stat div > span { display: block; font-size: 9px; color: var(--ff-muted); }
.ff-stat strong { display: block; font-size: 24px; font-weight: 650; line-height: 1.25; letter-spacing: -.7px; }
.ff-stat-caption { font-size: 8px; color: var(--ff-muted); align-self: flex-end; margin-left: auto; margin-bottom: 1px; white-space: nowrap; }
.ff-stat-arrow { position: absolute; top: 13px; right: 13px; width: 12px; height: 12px; color: var(--ff-muted); opacity: .55; }
.ff-lower-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 25px; }
.ff-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-bottom: 13px; }
.ff-section-heading h2 { font-family: "Onest", sans-serif; font-size: 14px; line-height: 1.5; font-weight: 650; margin: 0; display: flex; gap: 8px; align-items: center; letter-spacing: -.15px; }
.ff-section-heading h2 > .ff-icon { width: 16px; height: 16px; color: var(--ff-accent); }
.ff-section-heading > a { color: var(--ff-muted); display: flex; align-items: center; gap: 5px; font-size: 9px; }
.ff-section-heading > a > .ff-icon { width: 12px; height: 12px; }
.ff-small-count { color: var(--ff-muted); font-size: 9px; font-weight: 500; background: var(--ff-sidebar); border: 1px solid var(--ff-line); padding: 1px 6px; border-radius: 5px; }
.ff-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ff-project-card { background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 14px; padding: 16px 17px 13px; box-shadow: var(--ff-shadow); min-width: 0; transition: border-color .2s, transform .2s; }
.ff-project-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ff-accent) 35%, var(--ff-line)); }
.ff-project-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ff-project-symbol { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; background: var(--ff-tint); color: var(--ff-accent) !important; }
.ff-project-symbol .ff-icon { width: 17px; height: 17px; }
.ff-project-symbol-pink { background: color-mix(in srgb, var(--ff-pink) 14%, transparent); color: var(--ff-pink) !important; }
.ff-project-symbol-mint { background: color-mix(in srgb, var(--ff-mint) 14%, transparent); color: var(--ff-mint) !important; }
.ff-project-symbol-gold { background: color-mix(in srgb, var(--ff-gold) 14%, transparent); color: var(--ff-gold) !important; }
.ff-project-visibility { font-size: 8px; color: var(--ff-muted); padding: 2px 5px; border: 1px solid var(--ff-line); border-radius: 4px; line-height: 1.3; }
.ff-project-star { margin-left: auto; color: var(--ff-muted) !important; opacity: .7; }
.ff-project-star .ff-icon { width: 15px; height: 15px; }
.ff-project-card h3 { font-family: "Onest", sans-serif; font-size: 13px; letter-spacing: -.1px; margin: 0 0 5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.ff-project-card > p { color: var(--ff-muted); font-size: 9px; line-height: 1.6; min-height: 29px; margin: 0 0 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ff-project-card-bottom { display: flex; gap: 11px; align-items: center; border-top: 1px solid var(--ff-line); padding-top: 10px; color: var(--ff-muted); font-size: 8px; }
.ff-project-card-bottom .ff-icon { width: 11px; height: 11px; margin-right: 1px; }
.ff-language { display: flex; align-items: center; gap: 5px; }
.ff-language .ff-dot { width: 5px; height: 5px; }
.ff-project-time { margin-left: auto; white-space: nowrap; font-size: 7px; }
.ff-tiny-tag { color: var(--ff-muted); font-size: 7px; letter-spacing: 1px; }
.ff-activity-card { background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 14px; overflow: hidden; box-shadow: var(--ff-shadow); }
.ff-activity-item { display: flex; gap: 10px; padding: 15px 15px 13px; position: relative; border-bottom: 1px solid var(--ff-line); }
.ff-activity-item:hover { background: var(--ff-bg); }
.ff-activity-avatar { width: 25px; height: 25px; display: grid; place-items: center; background: var(--ff-tint); border: 1px solid color-mix(in srgb, var(--ff-accent) 15%, transparent); color: var(--ff-accent); border-radius: 50%; flex: 0 0 auto; font-size: 13px; font-weight: 650; }
.ff-activity-item > div { min-width: 0; }
.ff-activity-user { display: block; font-size: 9px; font-weight: 650; margin-bottom: 3px; }
.ff-activity-user > span { color: var(--ff-muted); font-size: 8px; font-weight: 400; margin-left: 2px; }
.ff-activity-item strong { display: block; font-size: 9px; font-weight: 550; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 270px; }
.ff-activity-meta { display: flex; gap: 5px; align-items: center; color: var(--ff-muted); font-size: 7px; margin-top: 6px; }
.ff-activity-repo { color: var(--ff-accent); }
.ff-activity-spark { margin-left: auto; color: var(--ff-accent); font-size: 14px; }
.ff-activity-all { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; color: var(--ff-muted) !important; font-size: 9px; }
.ff-activity-all .ff-icon { width: 13px; height: 13px; }
.ff-quote { position: relative; border: 1px dashed color-mix(in srgb, var(--ff-accent) 27%, transparent); border-radius: 13px; padding: 16px 17px 14px 43px; margin-top: 14px; background: color-mix(in srgb, var(--ff-tint) 28%, transparent); }
.ff-quote > .ff-icon { position: absolute; width: 19px; height: 19px; left: 15px; top: 18px; color: var(--ff-accent); }
.ff-quote p { font-size: 10px; font-weight: 550; line-height: 1.7; margin: 0 0 4px; }
.ff-quote > span { font-size: 7px; color: var(--ff-muted); }
.ff-home-footer { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ff-line); color: var(--ff-muted); font-size: 7px; min-height: 33px; background: none; }
.ff-heart { color: var(--ff-pink); font-size: 11px; }
.ff-home-footer > span:nth-child(2) > span { color: var(--ff-accent); margin-left: 7px; }
.ff-home-footer a { display: flex; align-items: center; gap: 5px; }
.ff-home-footer a .ff-icon { width: 10px; height: 10px; }
.ff-loading { color: var(--ff-muted); font-size: 12px; padding: 15px; line-height: 1.8; }
.ff-native-view { display: none; }
.ff-native-mode .ff-native-view { display: block; }
.ff-native-mode .ff-home { display: none; }
.ff-native-toggle { white-space: nowrap; padding: 8px 11px; font-size: 10px; color: var(--ff-muted); background: var(--ff-bg); border: 1px solid var(--ff-line); border-radius: 8px; cursor: pointer; }
.ff-native-toggle:hover { color: var(--ff-accent); border-color: var(--ff-accent); }
.ff-worldbar:has(.ff-native-toggle) .ff-chooser { margin-left: auto; }
.ff-repo-mascot { margin: 26px 0 5px; border: 1px solid var(--ff-line); border-radius: 16px; padding: 15px 12px; background: radial-gradient(ellipse at 50% 30%, var(--ff-tint), var(--ff-panel) 80%); overflow: hidden; text-align: center; position: relative; }
.ff-repo-mascot > img { width: 100%; height: 170px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 7px color-mix(in srgb, var(--ff-accent) 15%, transparent)); }
.ff-repo-mascot figcaption > span { color: var(--ff-accent); letter-spacing: 1.7px; font-size: 9px; font-weight: 650; }
.ff-repo-mascot figcaption p { color: var(--ff-muted); font-size: 10px; line-height: 1.6; margin: 7px 0 0; }
.ff-mascot-stars { position: absolute; inset: 26px 15px auto; color: var(--ff-accent); font-size: 20px; display: flex; justify-content: space-between; opacity: .6; }
.ff-mascot-stars span { margin-top: 75px; font-size: 12px; }
html[data-world="winx"] .ff-repo-mascot > img { mix-blend-mode: multiply; }
html[data-world="succubus"] .ff-repo-mascot > img { height: 250px; }
@media (max-width: 700px) { .ff-topbar .ff-native-toggle { display: none; } .ff-worldbar:has(.ff-native-toggle) .ff-chooser { margin-left: 0; } }
/* The same worlds continue into the working, native Gitea pages. */
#navbar { border-bottom: 1px solid var(--ff-line); min-height: 57px; padding-left: 20px; padding-right: 20px; background: var(--ff-panel); }
#navbar .item { font-size: 12px; }
.ff-worldbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; order: 0; padding: 14px max(24px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid var(--ff-line); color: var(--ff-text); background: linear-gradient(110deg, var(--ff-sidebar), var(--ff-bg)); }
.ff-worldbar-brand { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 650; color: var(--ff-text); }
.ff-worldbar-brand > .ff-icon { color: var(--ff-accent); width: 23px; height: 23px; }
.ff-worldbar-note { margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--ff-line); color: var(--ff-muted); font-size: 10px; font-weight: 400; }
.repository .secondary-nav { background: linear-gradient(110deg, var(--ff-hero-a), var(--ff-hero-b) 70%, var(--ff-hero-c)) !important; border-bottom: 1px solid var(--ff-line); position: relative; overflow: hidden; }
.repository .secondary-nav::after { content: ""; position: absolute; width: 175px; height: 170px; background: var(--ff-art-url) center 20% / contain no-repeat; right: calc((100vw - min(1280px, 92vw)) / 2 + 28px); top: 7px; opacity: .17; pointer-events: none; }
.repository .repo-header { padding: 16px 0 12px; position: relative; z-index: 1; }
.repository .secondary-nav .ui.tabs { position: relative; z-index: 1; }
.repository .ui.tabular.menu .item { border-radius: 10px 10px 0 0; font-size: 12px; }
.repository .ui.tabular.menu .active.item { color: var(--ff-accent); }
.ui.segment, .ui.attached.segment, .ui.table { border-color: var(--ff-line); }
.ui.button { border-radius: 8px; }
.ui.primary.button, .ui.green.button { background: var(--ff-accent); color: var(--ff-panel); }
.ui.primary.button:hover, .ui.green.button:hover { background: var(--ff-accent-hover); }
.ui.basic.button { border-radius: 8px; }
.ui.input input, .ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="password"] { border-radius: 8px; }
.repo-buttons .ui.button { border-radius: 7px; }
.repository .file-header, .repository .file-view, .repository #repo-files-table { border-color: var(--ff-line); }
.repository .markdown h1, .repository .markdown h2 { border-bottom-color: var(--ff-line); }
.repository .markdown h1 { color: var(--ff-accent); }
.repository .markdown blockquote { border-left-color: var(--ff-accent); background: var(--ff-sidebar); padding: 10px 18px; border-radius: 0 8px 8px 0; }
/* Distinct compositions rather than just hue changes. */
html[data-world="pony"] .ff-hero::before { content: ""; position: absolute; width: 200px; height: 90px; right: -40px; top: -45px; border-radius: 100%; background: #fff7; box-shadow: -40px 14px 0 -6px #fff4, -790px 336px 0 12px #fff3, -715px 350px 0 -6px #fff3; }
html[data-world="pony"] .ff-hero-image { transform: translate(0, 6px); }
html[data-world="winx"] .ff-art-halo { width: 275px; height: 275px; right: 47px; top: 25px; background: radial-gradient(circle, #f3ffee 10%, #ccecf0 65%, #b1e0e5); opacity: .8; }
html[data-world="winx"] .ff-art-ring { right: 24px; top: 3px; border-style: dashed; border-color: #7b8acb45; }
html[data-world="winx"] .ff-hero-art::before { content: ""; position: absolute; left: -16px; bottom: 11px; width: 178px; height: 256px; z-index: 3; background: url("/assets/art/winx-flora.png") center / contain no-repeat; filter: drop-shadow(0 4px 8px #74c5be20); }
html[data-world="winx"] .ff-hero-image { width: 90%; left: 10%; transform: rotate(3deg) translateY(-3px); padding: 0 12px 0 0; mix-blend-mode: multiply; }
html[data-world="winx"] .ff-floating-label { left: 27%; bottom: 14px; transform: rotate(3deg); }
html[data-world="winx"] .ff-mood-line { width: 180px; height: 180px; border-radius: 100% 0 100% 0; right: -118px; top: -45px; transform: rotate(20deg); }
html[data-world="succubus"] .ff-hero { background: radial-gradient(ellipse at 90% 65%, #58316c70 0%, transparent 65%), linear-gradient(100deg, #251c36, #392544 65%, #21182e); }
html[data-world="succubus"] .ff-hero-art { left: 52%; }
html[data-world="succubus"] .ff-hero-image { height: 450px; width: 100%; inset: -8px 0 auto; object-position: center top; padding: 0; filter: drop-shadow(0 0 30px #b894ff26); }
html[data-world="succubus"] .ff-art-halo { width: 228px; height: 228px; background: radial-gradient(circle at 28% 25%, #c4bad7, #7c668c 75%); right: 66px; top: 37px; opacity: .54; box-shadow: 0 0 80px #b489f323; }
html[data-world="succubus"] .ff-art-ring { width: 270px; height: 270px; top: 16px; right: 46px; border-color: #ceb5fa28; }
html[data-world="succubus"] .ff-hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle, #f7e0ff 1px, transparent 1.5px); background-size: 64px 47px; opacity: .3; mask-image: linear-gradient(to bottom, #000, transparent); }
html[data-world="succubus"] .ff-star-one { color: #e7c1f5; left: 11%; }
html[data-world="succubus"] .ff-star-three { color: #ecc1d9; }
html[data-world="succubus"] .ff-floating-label { background: #241931de; border-color: #a277d34a; left: 17%; color: #d8bbf7; }
html[data-world="succubus"] .ff-brand-symbol::before { background: #352445; }
html[data-world="succubus"] .ff-world-tag { background: #4931534a; }
html[data-world="succubus"] .ff-button-primary { color: #24162f; }
html[data-world="succubus"] .ff-sidebar-mood::after { content: "☾"; position: absolute; font-size: 105px; line-height: 1; color: #ba96f30f; right: -17px; bottom: 6px; transform: rotate(-20deg); }
html[data-world="succubus"] .repository .secondary-nav::after { opacity: .22; background-size: auto 220px; background-position: center top; }
/* Only gentle motion, and no motion when the OS requests it. */
@media (prefers-reduced-motion: no-preference) {
  .ff-art-star { animation: ff-drift 7s ease-in-out infinite alternate; }
  .ff-star-three { animation-delay: -3s; }
  .ff-star-two { animation-delay: -5s; }
  @keyframes ff-drift { from { translate: 0 0; } to { translate: 0 -5px; } }
}
@media (min-width: 1700px) { .ff-dashboard { padding-top: 36px; } .ff-hero { height: 375px; } .ff-hero h2 { font-size: 45px; } .ff-hero-text { padding-top: 35px; } }
@media (max-width: 1250px) {
  .ff-home { grid-template-columns: 200px minmax(0, 1fr); }
  .ff-sidebar { padding-left: 15px; padding-right: 15px; }
  .ff-dashboard { padding-left: 24px; padding-right: 24px; }
  .ff-topbar { padding-left: 24px; padding-right: 24px; }
  .ff-hero-text { padding-left: 25px; padding-right: 0; }
  .ff-hero h2 { font-size: 34px; }
  .ff-chooser-label { display: none; }
  .ff-stat-caption { display: none; }
  .ff-hero-actions { gap: 12px; }
  .ff-lower-grid { gap: 17px; grid-template-columns: 1.4fr 1fr; }
  .ff-project-card { padding-left: 13px; padding-right: 13px; }
  .ff-project-time { display: none; }
  .ff-activity-item strong { max-width: 220px; }
  .ff-hero-art { left: 55%; }
}
@media (max-width: 1000px) {
  .ff-home { grid-template-columns: 170px minmax(0, 1fr); }
  .ff-brand { font-size: 18px; gap: 5px; padding: 0; }
  .ff-brand-sub { font-size: 6px; letter-spacing: .7px; }
  .ff-sidebar { padding-left: 12px; padding-right: 12px; }
  .ff-brand-symbol { width: 30px; }
  .ff-brand-symbol .ff-icon { width: 28px; height: 28px; }
  .ff-side-nav a { gap: 8px; padding: 0 8px; font-size: 10px; }
  .ff-side-count { padding: 1px 4px; font-size: 8px; }
  .ff-favorites { padding-left: 8px; }
  .ff-favorites a { font-size: 9px; gap: 7px; }
  .ff-workspace { padding: 10px 7px; gap: 7px; }
  .ff-workspace strong { font-size: 10px; }
  .ff-workspace div > span { font-size: 8px; }
  .ff-sidebar-mood { padding-left: 12px; padding-right: 12px; }
  .ff-sidebar-mood strong { font-size: 14px; }
  .ff-page-heading { align-items: flex-start; }
  .ff-page-heading h1 { font-size: 23px; }
  .ff-page-heading p { font-size: 10px; }
  .ff-chooser button { padding: 8px; gap: 4px; font-size: 9px; }
  .ff-chooser button .ff-icon { display: none; }
  .ff-hero-text { width: 65%; padding-left: 23px; }
  .ff-hero-art { left: 59%; opacity: .95; }
  .ff-hero h2 { font-size: 30px; }
  .ff-hero { height: 320px; }
  .ff-hero-actions { flex-wrap: wrap; gap: 12px; }
  .ff-hero-caption { font-size: 7px; }
  .ff-world-tag { gap: 5px; font-size: 7px; }
  .ff-world-tag > span:last-child { display: none; }
  .ff-stat { padding: 13px; gap: 9px; }
  .ff-stat div > span { font-size: 8px; }
  .ff-stat-icon { width: 28px; height: 28px; border-radius: 8px; }
  .ff-stat-icon .ff-icon { width: 15px; height: 15px; }
  .ff-lower-grid { grid-template-columns: 1fr; }
  .ff-activity-item strong { max-width: unset; }
  .ff-home-footer { flex-wrap: wrap; }
  html[data-world="winx"] .ff-hero-art::before { display: none; }
  html[data-world="succubus"] .ff-hero-art { left: 56%; }
  .ff-art-halo, .ff-art-ring { right: 0 !important; }
}
@media (max-width: 700px) {
  .ff-home { display: block; }
  .ff-sidebar { display: none; }
  .ff-topbar { height: 62px; padding: 0 18px; gap: 13px; }
  .ff-breadcrumb > span, .ff-breadcrumb > .ff-icon { display: none; }
  .ff-search { width: auto; flex: 1; margin: 0; }
  .ff-search input { font-size: 9px; }
  .ff-account > span:first-child { display: none; }
  .ff-dashboard { padding: 23px 17px 16px; }
  .ff-page-heading { flex-direction: column; gap: 16px; margin-bottom: 17px; }
  .ff-page-heading h1 { font-size: 25px; }
  .ff-page-heading p { font-size: 10px; }
  .ff-chooser { width: 100%; }
  .ff-chooser-label { display: block; margin-right: auto; }
  .ff-chooser button { font-size: 10px; padding: 9px 10px; }
  .ff-chooser button .ff-icon { display: inline-block; width: 13px; height: 13px; }
  .ff-hero { height: 485px; border-radius: 17px; }
  .ff-hero-text { width: 100%; padding: 23px 24px; height: 280px; }
  .ff-hero h2 { font-size: 31px; margin-top: 13px; }
  .ff-hero-text > p { font-size: 10px; line-height: 1.8; }
  .ff-hero-actions { margin-top: 16px; gap: 15px; }
  .ff-hero-caption { display: none; }
  .ff-hero-art { inset: auto 0 0 20%; height: 220px; opacity: 1; }
  .ff-hero-image { padding-bottom: 0; }
  .ff-floating-label { left: -15%; bottom: 20px; padding: 9px; }
  .ff-art-halo { width: 200px; height: 200px; top: 0; right: 10px !important; }
  .ff-art-ring { width: 235px; height: 235px; top: -15px; right: -4px !important; }
  .ff-star-one { left: -16%; top: 20%; }
  .ff-stat { min-height: 81px; padding: 11px 9px; display: block; }
  .ff-stat-icon { display: none; }
  .ff-stat div > span { font-size: 8px; }
  .ff-stat strong { font-size: 24px; margin-top: 6px; }
  .ff-stat-arrow { right: 7px; top: auto; bottom: 12px; }
  .ff-stats { gap: 9px; margin-top: 14px; margin-bottom: 22px; }
  .ff-project-grid { gap: 10px; }
  .ff-project-card { padding: 13px 12px 12px; }
  .ff-project-card h3 { font-size: 11px; }
  .ff-project-card > p { font-size: 8px; min-height: 40px; }
  .ff-project-card-bottom { gap: 8px; font-size: 7px; }
  .ff-project-card-bottom .ff-icon { width: 9px; height: 9px; }
  .ff-project-visibility { font-size: 7px; }
  .ff-project-symbol { width: 26px; height: 26px; }
  .ff-section-heading h2 { font-size: 13px; }
  .ff-home-footer { justify-content: space-between; gap: 13px; font-size: 7px; }
  .ff-home-footer > span:nth-child(2) { display: none; }
  .ff-worldbar { padding: 12px 15px; flex-direction: column; gap: 12px; }
  .ff-worldbar-note { font-size: 9px; }
  .ff-worldbar .ff-chooser { max-width: 400px; }
  html[data-world="winx"] .ff-hero-art { left: 20%; height: 220px; }
  html[data-world="winx"] .ff-hero-image { height: 265px; width: 100%; left: 0; top: -25px; }
  html[data-world="winx"] .ff-floating-label { left: -15%; }
  html[data-world="succubus"] .ff-hero-art { left: 20%; height: 245px; }
  html[data-world="succubus"] .ff-hero-image { height: 330px; top: -3px; }
  html[data-world="succubus"] .ff-floating-label { left: -15%; }
}