/* ═══════════════════════════════════════════════════════════════════════════ OKEMO — UNIFIED SITE STYLESHEET (src/site.css) The single place to edit every hand-written style on the site. Tailwind (compiled output.css / Play CDN) still handles layout utilities — this file owns everything else. TABLE OF CONTENTS §1 FONTS — @font-face declarations (site-wide, declared once) §2 DESIGN TOKENS — colors, accent system, light/dark, --chrome-* recipe §3 SHARED COMPONENTS — .skuo buttons, .ui-*, .card, inputs, .ov-nav, .discord §4 ICONS — Font Awesome mask icons (GENERATED by tools/build-icons.mjs) §5+ PAGE SECTIONS — one per page, scoped [data-page="..."], alphabetized: ai-home · chat · design · design-lab · editor · goals · home · manage · privacy · research · search · themes · tos · version · word RULES - Page-local styles go in that page's section, scoped [data-page=""]. - Something every page needs graduates to §3 (or §2 if it's a token). - Never edit between the §4 GENERATED markers by hand — edit tools/build-icons.mjs and re-run it. - .dark lives on ; data-page on . Page-section dark overrides look like: .dark [data-page="chat"] .thing { ... } ═══════════════════════════════════════════════════════════════════════════ */ /* ── JetBrains Mono ───────────────────────────────────────────── @import MUST stay above every rule in this file (only comments may precede it) — browsers silently drop a misplaced @import. ── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); /* ═══ §1 FONTS ═══════════════════════════════════════════════════════════ */ @font-face { font-family: 'Satoshi'; src: url('../Fonts/Satoshi-Variable.ttf') format('truetype'); font-weight: 300 900; font-display: swap; font-style: normal; } @font-face { font-family: 'Satoshi'; src: url('../Fonts/Satoshi-VariableItalic.ttf') format('truetype'); font-weight: 300 900; font-display: swap; font-style: italic; } /* ═══ §2 DESIGN TOKENS · §3 SHARED COMPONENTS ════════════════════════════ (formerly src/design-tokens.css — verbatim) ════════════════════════════════════════════════════════════════════════ */ /* ── Light tokens ───────────────────────────────────────────── */ :root { --bg: #f5f4ed; --bg-elevated: #faf9f5; --bg-white: #ffffff; --text-primary: #141413; --text-secondary: #5e5d59; --text-tertiary: #87867f; --text-link: #3d3d3a; --accent: #c96478; --accent-light: #d97790; --border: #f0eee6; --border-strong: #e8e6dc; --shadow-ring: #d1cfc5; --surface-dark: #30302e; --deep-dark: #141413; --skuo-accent: var(--accent-color, var(--accent, #c96478)); /* ── Refined button recipe — consumed via --skuo-surface ── "Flat + a whisper of skeuomorphism": a very gentle top→bottom fade (lighter top, darker bottom; inverted under .dark), a hairline top edge highlight, a soft lift shadow and — on ACCENT surfaces only — a faint accent glow (neutral surfaces set --skuo-glow: transparent, so "important" controls tint accent and everything else stays grey). No wet-glass sheen, no hard top-shine — the glassy dome was retired 2026-07-01 in favor of this calmer, more modern surface. Neutral grey surface = --skuo-neutral (dark-aware). */ --skuo-neutral: var(--bg-elevated); --skuo-glow: color-mix(in srgb, var(--skuo-accent), transparent 82%); /* NOTE: the --chrome-* recipe (fill/shadow/border) is NOT defined here. It embeds var(--skuo-surface)/var(--skuo-glow), which are only set on the button elements — defining it at :root would freeze it to the fallback surface and inherit grey to every control. It's defined on the consumer elements instead (see "Refined recipe — resolved per element" below). */ } /* ── Dark tokens ────────────────────────────────────────────── */ .dark { --bg: #141413; --bg-elevated: #30302e; --bg-white: #30302e; --text-primary: #faf9f5; --text-secondary: #b0aea5; --text-tertiary: #87867f; --text-link: #d1cfc5; /* --accent and --accent-light intentionally swap in dark mode for lightness shift */ --accent: #d97790; --accent-light: #c96478; --border: #30302e; --border-strong: #3d3d3a; --shadow-ring: #3d3d3a; --skuo-accent: var(--accent-color, var(--accent, #d97790)); /* ── Refined recipe — dark mode. Only the neutral surface + glow live here; the --chrome-* recipe is defined per element (see .dark consumer rule). ── */ --skuo-neutral: color-mix(in srgb, var(--bg-elevated), white 6%); --skuo-glow: color-mix(in srgb, var(--skuo-accent), transparent 76%); } /* ── Global resets ──────────────────────────────────────────── */ /* Intentional global reset — all pages use the parchment/near-black base */ body { background-color: var(--bg); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } code, pre, .font-mono, [class*="code"] { font-family: 'JetBrains Mono', monospace; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; } /* The global accent-on-press overlay was removed 2026-07-01 — buttons no longer recolor to accent while pressed. Accent is carried at rest by .skuo-accent; press just deepens/insets via --chrome-shadow-active. */ /* ── Refined recipe — resolved PER ELEMENT ────────────────────── These --chrome-* custom properties embed var(--skuo-surface) and var(--skuo-glow). They are declared on the consumer elements (not :root) so each control resolves them against ITS OWN surface/glow — accent controls get an accent fill/border, neutral controls grey. (Declaring them at :root froze them to the fallback surface and made every button grey — the bug fixed 2026-07-01.) Add new consumers of var(--chrome-*) to this selector list. */ .skuo, .skuomorphic-btn, .skuomorphic-button, .ui-badge, .ui-badge--tiny, .ui-opt input, .ui-seg button.on { --chrome-border: color-mix(in srgb, var(--skuo-surface, #eceae2), black 14%); --chrome-fill: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-surface, #eceae2), white 7%), color-mix(in srgb, var(--skuo-surface, #eceae2), black 7%) ); --chrome-fill-hover: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-surface, #eceae2), white 12%), color-mix(in srgb, var(--skuo-surface, #eceae2), black 2%) ); --chrome-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.14), 0 2px 10px -4px var(--skuo-glow); --chrome-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 12px -3px rgba(0, 0, 0, 0.16), 0 4px 14px -4px var(--skuo-glow); --chrome-shadow-active: inset 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.08); } .dark .skuo, .dark .skuomorphic-btn, .dark .skuomorphic-button, .dark .ui-badge, .dark .ui-badge--tiny, .dark .ui-opt input, .dark .ui-seg button.on { --chrome-border: rgba(0, 0, 0, 0.5); --chrome-fill: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-surface, #3a3a37), white 8%), color-mix(in srgb, var(--skuo-surface, #3a3a37), black 8%) ); --chrome-fill-hover: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-surface, #3a3a37), white 14%), color-mix(in srgb, var(--skuo-surface, #3a3a37), black 3%) ); --chrome-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px -3px rgba(0, 0, 0, 0.45), 0 2px 10px -4px var(--skuo-glow); --chrome-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 3px 10px -2px rgba(0, 0, 0, 0.5), 0 4px 14px -4px var(--skuo-glow); --chrome-shadow-active: inset 0 1px 3px rgba(0, 0, 0, 0.4); } /* ── Refined button system (site-wide) ───────────────────────── Neutral controls are plain grey (--skuo-neutral, no accent glow); .skuo-accent carries the accent surface + glow. Soft top→bottom gradient + hairline highlight + lift shadow. Accent-aware via --skuo-accent. Authored once here; all 14 pages link this file. */ .skuo, .skuomorphic-btn, .skuomorphic-button { --skuo-surface: var(--skuo-neutral); --skuo-glow: transparent; position: relative; isolation: isolate; border: 1px solid var(--chrome-border); border-radius: 12px; background-image: var(--chrome-fill); box-shadow: var(--chrome-shadow); color: var(--text-primary); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.18s ease, background-image 0.2s ease; } /* Vestigial sheen layer — the refined surface has NO wet-glass reflection (retired 2026-07-01, along with the .skuo-soft variant that once used it). Left as an empty pseudo-element; no rule paints it. */ .skuo::before, .skuomorphic-btn::before, .skuomorphic-button::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 46%; border-radius: inherit; background: none; pointer-events: none; z-index: -1; } .skuo:hover, .skuomorphic-btn:hover, .skuomorphic-button:hover { transform: translateY(-1px); filter: brightness(1.03); background-image: var(--chrome-fill-hover); box-shadow: var(--chrome-shadow-hover); } .skuo:active, .skuomorphic-btn:active, .skuomorphic-button:active { transform: translateY(1px); filter: brightness(0.98); box-shadow: var(--chrome-shadow-active); } .skuo:focus-visible, .skuomorphic-btn:focus-visible, .skuomorphic-button:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px color-mix(in srgb, var(--skuo-accent), transparent 55%), 0 4px 14px -4px var(--skuo-glow); } .skuo:disabled, .skuo[disabled], .skuomorphic-btn:disabled, .skuomorphic-button:disabled { cursor: default; transform: none; filter: none; opacity: 0.55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* Accent / primary — deep accent surface, white text. Border derives from --chrome-border (same --skuo-surface as the fill) so the outline carries the exact same tint as the fill, not a darker, more-saturated ring. */ .skuo-accent { --skuo-surface: var(--skuo-accent); --skuo-glow: color-mix(in srgb, var(--skuo-accent), transparent 82%); color: var(--accent-contrast, #ffffff); border-color: var(--chrome-border); } /* Explicit neutral — plain grey surface, no accent glow. */ .skuo-neutral { --skuo-surface: var(--skuo-neutral); --skuo-glow: transparent; color: var(--text-primary); } /* Compact icon buttons — square, centered, smaller radius + gentler glow. Self-sizes around the icon so a bare `.skuo-icon` doesn't fall back to uneven default button padding (pages may still set an explicit w/h). */ .skuo-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; line-height: 0; border-radius: 9px; box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.14), 0 2px 10px -4px var(--skuo-glow); } .skuo-icon::before { height: 50%; opacity: 0.85; } .skuo-icon:hover { transform: none; filter: brightness(1.05); } .skuo-icon:active { transform: translateY(1px); box-shadow: var(--chrome-shadow-active); } /* Pill-shaped (keep rounded-full CTAs round) */ .skuo-pill { border-radius: 9999px; } .skuo-pill::before { border-radius: 9999px; } /* ── Dark mode neutral surface (grey; --skuo-neutral is dark-aware) ── */ .dark .skuo, .dark .skuomorphic-btn, .dark .skuomorphic-button { --skuo-surface: var(--skuo-neutral); } .dark .skuo::before, .dark .skuomorphic-btn::before, .dark .skuomorphic-button::before { background: none; } .dark .skuo-accent { --skuo-surface: var(--skuo-accent); border-color: var(--chrome-border); } .dark .skuo-neutral { --skuo-surface: var(--skuo-neutral); } /* ── Brand button modifier (layered over .skuo) ───────────────── Discord brand fill. Use as `.skuo.discord`. Authored once here so the brand button is controlled from this single file like every other control. Brand color is intentionally fixed (not accent). */ .discord { --skuo-surface: #5865f2; background-image: none; background-color: #5865f2; border-color: rgba(255, 255, 255, 0.2); color: #ffffff; } .discord:hover { background-image: none; background-color: #6a76f5; } .discord:active { background-image: none; background-color: #4d59d6; } .dark .discord { background-image: none; background-color: #5865f2; } /* ── Unified text inputs (site-wide, low specificity) ─────────── Element-attribute selectors only, so any page rule that uses a class or id (chat input bar, word #doc-title/#ai-input, editor) overrides without effort. Buttons/checkboxes/radios/ranges excluded. */ input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], textarea, select { background-color: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.55rem 0.75rem; font: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="search"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input[type="url"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder { color: var(--text-tertiary); } input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--skuo-accent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 3px color-mix(in srgb, var(--skuo-accent), transparent 78%); } .dark input[type="text"], .dark input[type="email"], .dark input[type="search"], .dark input[type="password"], .dark input[type="number"], .dark input[type="url"], .dark input[type="tel"], .dark textarea, .dark select { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); } /* ── Unified card surface (opt-in via .card) ───────────────────── */ .card { background-color: var(--bg-white); border: 1px solid var(--border); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.25); } .card-pad { padding: 1.25rem; } .dark .card { background-color: var(--bg-elevated); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); } /* ── Reusable UI components (site-wide, `ui-` namespace) ───────── Opt-in classes, all themeable via the shared tokens and dark-mode aware. Authored once here; every page that links this file can use them, so editing a rule here updates that component everywhere. Inner element selectors are scoped under their `ui-` parent so the plain names (.av, .dot, .sep…) never style anything globally. */ /* Tags & badges — refined skuo surface, same language as buttons/checkboxes. Neutral badge = pale-accent chip; --accent = accent chip; --tiny = compact. */ .ui-badge { --skuo-surface: var(--skuo-neutral); --skuo-glow: transparent; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background-image: var(--chrome-fill); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); color: var(--text-secondary); } .ui-badge--accent { --skuo-surface: var(--skuo-accent); --skuo-glow: color-mix(in srgb, var(--skuo-accent), transparent 82%); border-color: var(--chrome-border); color: #fff; } .ui-badge--tiny { --skuo-surface: var(--skuo-neutral); --skuo-glow: transparent; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.24rem 0.55rem; border-radius: 999px; background-image: var(--chrome-fill); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); color: var(--text-tertiary); } /* Breadcrumb */ .ui-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-tertiary); } .ui-crumb .sep { opacity: 0.5; } .ui-crumb .current { color: var(--text-primary); font-weight: 500; } /* Accordion (use on

) */ .ui-accordion { border-top: 1px solid var(--border); } .ui-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); } .ui-accordion summary::-webkit-details-marker { display: none; } .ui-accordion .plus { color: var(--text-tertiary); font-size: 1.1rem; line-height: 1; transition: transform 0.15s ease; } .ui-accordion[open] .plus { transform: rotate(45deg); } .ui-accordion .body { padding: 0 0 0.85rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; } .ui-accordion .body a { color: var(--skuo-accent); text-decoration: none; font-weight: 500; } /* Bullets */ .ui-bullet { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--text-primary); } .ui-bullet .dot { flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--text-primary); color: var(--bg-white); display: grid; place-items: center; } /* Checkbox / radio — custom control in the refined skuo surface language. Same --chrome-fill + --chrome-shadow recipe as the buttons and badges, so an unchecked box reads as a neutral chip and a checked one as accent. Checkbox = rounded square + checkmark; radio = circle + dot. */ .ui-opt { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--text-primary); } .ui-opt input { --skuo-surface: var(--skuo-neutral); --skuo-glow: transparent; appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 18px; height: 18px; cursor: pointer; border: 1px solid var(--chrome-border); border-radius: 5px; background-image: var(--chrome-fill); background-repeat: no-repeat; background-position: center; box-shadow: var(--chrome-shadow); transition: background-image 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease; } .ui-opt input[type="radio"] { border-radius: 999px; } .ui-opt input:hover { background-image: var(--chrome-fill-hover); } .ui-opt input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--skuo-accent), transparent 55%), var(--chrome-shadow); } .ui-opt input:checked { --skuo-surface: var(--skuo-accent); --skuo-glow: color-mix(in srgb, var(--skuo-accent), transparent 82%); border-color: var(--chrome-border); } .ui-opt input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"), var(--chrome-fill); background-size: 68%, cover; } .ui-opt input[type="radio"]:checked { background-image: radial-gradient(circle at center, #ffffff 0 33%, transparent 38%), var(--chrome-fill); } .ui-opt.is-disabled { color: var(--text-tertiary); } .ui-opt input:disabled { opacity: 0.5; cursor: default; box-shadow: var(--chrome-shadow-active); } /* Dark-mode neutral surface for badges + checkbox/radio (grey, mirrors .dark .skuo) */ .dark .ui-badge, .dark .ui-badge--tiny, .dark .ui-opt input { --skuo-surface: var(--skuo-neutral); } .dark .ui-badge--accent, .dark .ui-opt input:checked { --skuo-surface: var(--skuo-accent); } /* Input with a leading icon */ .ui-field { position: relative; } .ui-field .lead { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } .ui-field input { padding-left: 2.1rem; width: 100%; } /* Info / callout block */ .ui-info { display: flex; gap: 0.6rem; padding: 0.9rem; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border-strong); } .ui-info .ic { flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--text-primary); color: var(--bg-white); display: grid; place-items: center; } .ui-info p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; } .ui-info strong { color: var(--text-primary); } /* Segmented control */ .ui-seg { display: inline-flex; padding: 0.25rem; gap: 0.2rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-strong); } .ui-seg button { border: none; background: transparent; color: var(--text-secondary); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.82rem; cursor: pointer; } .ui-seg button.on { --skuo-surface: var(--skuo-accent); background-image: var(--chrome-fill); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px -1px rgba(0, 0, 0, 0.2); } /* List cell */ .ui-cell { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem; border-radius: 12px; border: 1px solid var(--border); } .ui-cell .av { flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--skuo-accent); color: #fff; display: grid; place-items: center; font-weight: 600; } .ui-cell .nm { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); } .ui-cell .mt { font-size: 0.74rem; color: var(--text-tertiary); } .ui-cell .price { margin-left: auto; font-weight: 600; font-size: 0.85rem; color: var(--text-primary); } /* ── Universal floating nav (.ov-nav) ───────────────────────────── Shared by every page via src/nav.js. Styling only — no Tailwind utilities so it renders identically on output.css pages. */ .ov-nav { position: fixed; top: 1.1rem; left: 0; right: 0; margin: 0 auto; max-width: 64rem; padding: 0 1.5rem; z-index: 50; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; /* only the bar is interactive; lets page corners through */ } .ov-nav__bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 0.15rem; padding: 0.34rem; border-radius: 999px; max-width: calc(100vw - 2rem); /* mobile clip fix: never exceed viewport */ background-image: linear-gradient( 180deg, color-mix(in srgb, var(--bg-elevated), white 7%), color-mix(in srgb, var(--bg-elevated), black 7%) ); border: 1px solid color-mix(in srgb, var(--bg-elevated), black 14%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 6px 22px -8px rgba(0, 0, 0, 0.18); /* background is NOT transitioned: on a light/dark toggle the whole page flips instantly, so a 0.4s background fade here made the bar visibly lag behind. box-shadow still eases for the scroll-morph. */ transition: box-shadow 0.4s ease; } .ov-nav.scrolled .ov-nav__bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 10px 30px -8px rgba(0, 0, 0, 0.24); } .dark .ov-nav__bar { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--bg-elevated), white 8%), color-mix(in srgb, var(--bg-elevated), black 8%) ); border-color: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px -8px rgba(0, 0, 0, 0.55); } .dark .ov-nav.scrolled .ov-nav__bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 34px -8px rgba(0, 0, 0, 0.6); } .ov-nav__chevron { display: flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease, transform 0.12s ease; } .ov-nav__chevron:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); } .ov-nav__chevron:active { transform: scale(0.9); } .ov-nav__chevron svg { transition: transform 0.25s ease; } .ov-nav__bar.collapsed .ov-nav__chevron svg { transform: rotate(180deg); } .ov-nav__links { display: flex; align-items: center; gap: 0.1rem; min-width: 0; /* allow the flex item to shrink below content width */ overflow: hidden; transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* when the expanded links can't fit the viewport-capped bar, scroll instead of clip */ .ov-nav__links.is-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ov-nav__links.is-scroll::-webkit-scrollbar { display: none; } /* pop animation on expand/collapse */ @keyframes ov-nav-pop { 0% { transform: scale(var(--pop-from, 0.97)); opacity: 0.7; } 60% { transform: scale(1.015); } 100% { transform: scale(1); opacity: 1; } } .ov-nav__bar.pop { animation: ov-nav-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @media (prefers-reduced-motion: reduce) { .ov-nav__bar.pop { animation: none; } } .ov-nav__div { flex: none; width: 1px; height: 1.05rem; margin: 0 0.3rem; background: color-mix(in srgb, var(--text-primary) 16%, transparent); } .ov-nav__link { position: relative; z-index: 1; font-family: 'Satoshi', 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); padding: 0.5rem 0.9rem; border-radius: 999px; white-space: nowrap; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, transform 0.12s ease; } .ov-nav__link:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); } .ov-nav__link:active { transform: scale(0.94); } /* primary accent pill — replaces the old Tailwind px-4 py-2 inline-flex utils */ .ov-nav__primary { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; white-space: nowrap; text-decoration: none; } .ov-nav__logo { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; } /* icon buttons inside the bar sit flush with the pill height */ .ov-nav .skuo-icon { width: 2.3rem; height: 2.3rem; padding: 0; flex: none; } /* theme icon swap */ .ov-nav__sun { display: none; } .dark .ov-nav__sun { display: block; } .dark .ov-nav__moon { display: none; } @media (max-width: 767px) { .ov-nav { top: 0.9rem; padding: 0 1rem; } .ov-nav__bar { gap: 0.1rem; padding: 0.34rem; } .ov-nav__links { gap: 0.05rem; } .ov-nav__link { font-size: 0.82rem; padding: 0.52rem 0.78rem; } .ov-nav__chevron { width: 2.2rem; height: 2.2rem; } .ov-nav .skuo-icon { width: 2.4rem; height: 2.4rem; } .ov-nav__div { margin: 0 0.24rem; } .ov-nav__primary { padding: 0.52rem 1.1rem; font-size: 0.85rem; } } /* §4 ICONS — generated by tools/build-icons.mjs: begin */ /* 54 Font Awesome mask icons (from @fortawesome/fontawesome-free) */ .fa-align-center { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M352%2064c0-17.7-14.3-32-32-32L128%2032c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l192%200c17.7%200%2032-14.3%2032-32zm96%20128c0-17.7-14.3-32-32-32L32%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32zM0%20448c0%2017.7%2014.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20416c-17.7%200-32%2014.3-32%2032zM352%20320c0-17.7-14.3-32-32-32l-192%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l192%200c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M352%2064c0-17.7-14.3-32-32-32L128%2032c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l192%200c17.7%200%2032-14.3%2032-32zm96%20128c0-17.7-14.3-32-32-32L32%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32zM0%20448c0%2017.7%2014.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20416c-17.7%200-32%2014.3-32%2032zM352%20320c0-17.7-14.3-32-32-32l-192%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l192%200c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-align-justify { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M448%2064c0-17.7-14.3-32-32-32L32%2032C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096l384%200c17.7%200%2032-14.3%2032-32zm0%20256c0-17.7-14.3-32-32-32L32%20288c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32zM0%20192c0%2017.7%2014.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20160c-17.7%200-32%2014.3-32%2032zM448%20448c0-17.7-14.3-32-32-32L32%20416c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M448%2064c0-17.7-14.3-32-32-32L32%2032C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096l384%200c17.7%200%2032-14.3%2032-32zm0%20256c0-17.7-14.3-32-32-32L32%20288c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32zM0%20192c0%2017.7%2014.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20160c-17.7%200-32%2014.3-32%2032zM448%20448c0-17.7-14.3-32-32-32L32%20416c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l384%200c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-align-left { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%2064c0%2017.7-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l224%200c17.7%200%2032%2014.3%2032%2032zm0%20256c0%2017.7-14.3%2032-32%2032L32%20352c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zM0%20192c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20224c-17.7%200-32-14.3-32-32zM448%20448c0%2017.7-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%2064c0%2017.7-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l224%200c17.7%200%2032%2014.3%2032%2032zm0%20256c0%2017.7-14.3%2032-32%2032L32%20352c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zM0%20192c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20224c-17.7%200-32-14.3-32-32zM448%20448c0%2017.7-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-align-right { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M448%2064c0%2017.7-14.3%2032-32%2032L192%2096c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zm0%20256c0%2017.7-14.3%2032-32%2032l-224%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zM0%20192c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20224c-17.7%200-32-14.3-32-32zM448%20448c0%2017.7-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M448%2064c0%2017.7-14.3%2032-32%2032L192%2096c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zm0%20256c0%2017.7-14.3%2032-32%2032l-224%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l224%200c17.7%200%2032%2014.3%2032%2032zM0%20192c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20224c-17.7%200-32-14.3-32-32zM448%20448c0%2017.7-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-arrow-right { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-105.4%20105.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-105.4%20105.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-arrow-turn-down { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M32%2064C14.3%2064%200%2049.7%200%2032S14.3%200%2032%200l96%200c53%200%2096%2043%2096%2096l0%20306.7%2073.4-73.4c12.5-12.5%2032.8-12.5%2045.3%200s12.5%2032.8%200%2045.3l-128%20128c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20402.7%20160%2096c0-17.7-14.3-32-32-32L32%2064z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M32%2064C14.3%2064%200%2049.7%200%2032S14.3%200%2032%200l96%200c53%200%2096%2043%2096%2096l0%20306.7%2073.4-73.4c12.5-12.5%2032.8-12.5%2045.3%200s12.5%2032.8%200%2045.3l-128%20128c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20402.7%20160%2096c0-17.7-14.3-32-32-32L32%2064z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-arrow-up { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M214.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-160%20160c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L160%20109.3%20160%20480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-370.7%20105.4%20105.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-160-160z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M214.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-160%20160c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L160%20109.3%20160%20480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-370.7%20105.4%20105.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-160-160z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-arrow-up-from-bracket { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M246.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-128%20128c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20109.3%20192%20320c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-210.7%2073.4%2073.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-128-128zM64%20352c0-17.7-14.3-32-32-32S0%20334.3%200%20352l0%2064c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96l0-64c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2064c0%2017.7-14.3%2032-32%2032L96%20448c-17.7%200-32-14.3-32-32l0-64z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M246.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-128%20128c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20109.3%20192%20320c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-210.7%2073.4%2073.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-128-128zM64%20352c0-17.7-14.3-32-32-32S0%20334.3%200%20352l0%2064c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96l0-64c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2064c0%2017.7-14.3%2032-32%2032L96%20448c-17.7%200-32-14.3-32-32l0-64z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-bold { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M32%2032C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096l32%200%200%20320-32%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l224%200c70.7%200%20128-57.3%20128-128%200-46.5-24.8-87.3-62-109.7%2018.7-22.3%2030-51%2030-82.3%200-70.7-57.3-128-128-128L32%2032zM288%20160c0%2035.3-28.7%2064-64%2064l-96%200%200-128%2096%200c35.3%200%2064%2028.7%2064%2064zM128%20416l0-128%20128%200c35.3%200%2064%2028.7%2064%2064s-28.7%2064-64%2064l-128%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M32%2032C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096l32%200%200%20320-32%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l224%200c70.7%200%20128-57.3%20128-128%200-46.5-24.8-87.3-62-109.7%2018.7-22.3%2030-51%2030-82.3%200-70.7-57.3-128-128-128L32%2032zM288%20160c0%2035.3-28.7%2064-64%2064l-96%200%200-128%2096%200c35.3%200%2064%2028.7%2064%2064zM128%20416l0-128%20128%200c35.3%200%2064%2028.7%2064%2064s-28.7%2064-64%2064l-128%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-bolt { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M338.8-9.9c11.9%208.6%2016.3%2024.2%2010.9%2037.8L271.3%20224%20416%20224c13.5%200%2025.5%208.4%2030.1%2021.1s.7%2026.9-9.6%2035.5l-288%20240c-11.3%209.4-27.4%209.9-39.3%201.3s-16.3-24.2-10.9-37.8L176.7%20288%2032%20288c-13.5%200-25.5-8.4-30.1-21.1s-.7-26.9%209.6-35.5l288-240c11.3-9.4%2027.4-9.9%2039.3-1.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M338.8-9.9c11.9%208.6%2016.3%2024.2%2010.9%2037.8L271.3%20224%20416%20224c13.5%200%2025.5%208.4%2030.1%2021.1s.7%2026.9-9.6%2035.5l-288%20240c-11.3%209.4-27.4%209.9-39.3%201.3s-16.3-24.2-10.9-37.8L176.7%20288%2032%20288c-13.5%200-25.5-8.4-30.1-21.1s-.7-26.9%209.6-35.5l288-240c11.3-9.4%2027.4-9.9%2039.3-1.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-bolt-lightning { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256L28.5%2028c2-16%2015.6-28%2031.8-28L228.9%200c15%200%2027.1%2012.1%2027.1%2027.1%200%203.2-.6%206.5-1.7%209.5L208%20160%20347.3%20160c20.2%200%2036.7%2016.4%2036.7%2036.7%200%207.4-2.2%2014.6-6.4%2020.7l-192.2%20281c-5.9%208.6-15.6%2013.7-25.9%2013.7l-2.9%200c-15.7%200-28.5-12.8-28.5-28.5%200-2.3%20.3-4.6%20.9-6.9L176%20288%2032%20288c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256L28.5%2028c2-16%2015.6-28%2031.8-28L228.9%200c15%200%2027.1%2012.1%2027.1%2027.1%200%203.2-.6%206.5-1.7%209.5L208%20160%20347.3%20160c20.2%200%2036.7%2016.4%2036.7%2036.7%200%207.4-2.2%2014.6-6.4%2020.7l-192.2%20281c-5.9%208.6-15.6%2013.7-25.9%2013.7l-2.9%200c-15.7%200-28.5-12.8-28.5-28.5%200-2.3%20.3-4.6%20.9-6.9L176%20288%2032%20288c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-check { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M434.8%2070.1c14.3%2010.4%2017.5%2030.4%207.1%2044.7l-256%20352c-5.5%207.6-14%2012.3-23.4%2013.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l101.5%20101.5%20234-321.7c10.4-14.3%2030.4-17.5%2044.7-7.1z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M434.8%2070.1c14.3%2010.4%2017.5%2030.4%207.1%2044.7l-256%20352c-5.5%207.6-14%2012.3-23.4%2013.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l101.5%20101.5%20234-321.7c10.4-14.3%2030.4-17.5%2044.7-7.1z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-circle-check { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%201%200-512%20256%20256%200%201%201%200%20512zM374%20145.7c-10.7-7.8-25.7-5.4-33.5%205.3L221.1%20315.2%20169%20263.1c-9.4-9.4-24.6-9.4-33.9%200s-9.4%2024.6%200%2033.9l72%2072c5%205%2011.8%207.5%2018.8%207s13.4-4.1%2017.5-9.8L379.3%20179.2c7.8-10.7%205.4-25.7-5.3-33.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%201%200-512%20256%20256%200%201%201%200%20512zM374%20145.7c-10.7-7.8-25.7-5.4-33.5%205.3L221.1%20315.2%20169%20263.1c-9.4-9.4-24.6-9.4-33.9%200s-9.4%2024.6%200%2033.9l72%2072c5%205%2011.8%207.5%2018.8%207s13.4-4.1%2017.5-9.8L379.3%20179.2c7.8-10.7%205.4-25.7-5.3-33.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-circle-info { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512zM224%20160a32%2032%200%201%201%2064%200%2032%2032%200%201%201%20-64%200zm-8%2064l48%200c13.3%200%2024%2010.7%2024%2024l0%2088%208%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-80%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l24%200%200-64-24%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512zM224%20160a32%2032%200%201%201%2064%200%2032%2032%200%201%201%20-64%200zm-8%2064l48%200c13.3%200%2024%2010.7%2024%2024l0%2088%208%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-80%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l24%200%200-64-24%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-circle-notch { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.7%2032.1c5%2016.9-4.6%2034.8-21.5%2039.8-79.3%2023.6-137.1%2097.1-137.1%20184.1%200%20106%2086%20192%20192%20192s192-86%20192-192c0-86.9-57.8-160.4-137.1-184.1-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6%2039.8-21.5C434.9%2042.1%20512%20140%20512%20256%20512%20397.4%20397.4%20512%20256%20512S0%20397.4%200%20256c0-116%2077.1-213.9%20182.9-245.4%2016.9-5%2034.8%204.6%2039.8%2021.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.7%2032.1c5%2016.9-4.6%2034.8-21.5%2039.8-79.3%2023.6-137.1%2097.1-137.1%20184.1%200%20106%2086%20192%20192%20192s192-86%20192-192c0-86.9-57.8-160.4-137.1-184.1-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6%2039.8-21.5C434.9%2042.1%20512%20140%20512%20256%20512%20397.4%20397.4%20512%20256%20512S0%20397.4%200%20256c0-116%2077.1-213.9%20182.9-245.4%2016.9-5%2034.8%204.6%2039.8%2021.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-circle-xmark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512zM167%20167c9.4-9.4%2024.6-9.4%2033.9%200l55%2055%2055-55c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-55%2055%2055%2055c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-55-55-55%2055c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l55-55-55-55c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512zM167%20167c9.4-9.4%2024.6-9.4%2033.9%200l55%2055%2055-55c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-55%2055%2055%2055c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-55-55-55%2055c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l55-55-55-55c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-clipboard { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032l-8.6%200C300.4%2012.9%20279.7%200%20256%200L128%200C104.3%200%2083.6%2012.9%2072.6%2032L64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-352c0-35.3-28.7-64-64-64zM136%20112c-13.3%200-24-10.7-24-24s10.7-24%2024-24l112%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-112%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032l-8.6%200C300.4%2012.9%20279.7%200%20256%200L128%200C104.3%200%2083.6%2012.9%2072.6%2032L64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-352c0-35.3-28.7-64-64-64zM136%20112c-13.3%200-24-10.7-24-24s10.7-24%2024-24l112%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-112%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-copy { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%20336l-192%200c-8.8%200-16-7.2-16-16l0-256c0-8.8%207.2-16%2016-16l133.5%200c4.2%200%208.3%201.7%2011.3%204.7l58.5%2058.5c3%203%204.7%207.1%204.7%2011.3L400%20320c0%208.8-7.2%2016-16%2016zM192%20384l192%200c35.3%200%2064-28.7%2064-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7%2018.7C358.7%206.7%20342.5%200%20325.5%200L192%200c-35.3%200-64%2028.7-64%2064l0%20256c0%2035.3%2028.7%2064%2064%2064zM64%20128c-35.3%200-64%2028.7-64%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l192%200c35.3%200%2064-28.7%2064-64l0-16-48%200%200%2016c0%208.8-7.2%2016-16%2016L64%20464c-8.8%200-16-7.2-16-16l0-256c0-8.8%207.2-16%2016-16l16%200%200-48-16%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%20336l-192%200c-8.8%200-16-7.2-16-16l0-256c0-8.8%207.2-16%2016-16l133.5%200c4.2%200%208.3%201.7%2011.3%204.7l58.5%2058.5c3%203%204.7%207.1%204.7%2011.3L400%20320c0%208.8-7.2%2016-16%2016zM192%20384l192%200c35.3%200%2064-28.7%2064-64l0-197.5c0-17-6.7-33.3-18.7-45.3L370.7%2018.7C358.7%206.7%20342.5%200%20325.5%200L192%200c-35.3%200-64%2028.7-64%2064l0%20256c0%2035.3%2028.7%2064%2064%2064zM64%20128c-35.3%200-64%2028.7-64%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l192%200c35.3%200%2064-28.7%2064-64l0-16-48%200%200%2016c0%208.8-7.2%2016-16%2016L64%20464c-8.8%200-16-7.2-16-16l0-256c0-8.8%207.2-16%2016-16l16%200%200-48-16%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-diagram-project { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2080C0%2053.5%2021.5%2032%2048%2032l96%200c26.5%200%2048%2021.5%2048%2048l0%2016%20128%200%200-16c0-26.5%2021.5-48%2048-48l96%200c26.5%200%2048%2021.5%2048%2048l0%2096c0%2026.5-21.5%2048-48%2048l-96%200c-26.5%200-48-21.5-48-48l0-16-128%200%200%2016c0%207.3-1.7%2014.3-4.6%2020.5l68.6%2091.5%2080%200c26.5%200%2048%2021.5%2048%2048l0%2096c0%2026.5-21.5%2048-48%2048l-96%200c-26.5%200-48-21.5-48-48l0-96c0-7.3%201.7-14.3%204.6-20.5L128%20224%2048%20224c-26.5%200-48-21.5-48-48L0%2080z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2080C0%2053.5%2021.5%2032%2048%2032l96%200c26.5%200%2048%2021.5%2048%2048l0%2016%20128%200%200-16c0-26.5%2021.5-48%2048-48l96%200c26.5%200%2048%2021.5%2048%2048l0%2096c0%2026.5-21.5%2048-48%2048l-96%200c-26.5%200-48-21.5-48-48l0-16-128%200%200%2016c0%207.3-1.7%2014.3-4.6%2020.5l68.6%2091.5%2080%200c26.5%200%2048%2021.5%2048%2048l0%2096c0%2026.5-21.5%2048-48%2048l-96%200c-26.5%200-48-21.5-48-48l0-96c0-7.3%201.7-14.3%204.6-20.5L128%20224%2048%20224c-26.5%200-48-21.5-48-48L0%2080z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-earth-americas { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M55.7%20199.7l30.9%2030.9c6%206%2014.1%209.4%2022.6%209.4l21.5%200c8.5%200%2016.6%203.4%2022.6%209.4l29.3%2029.3c6%206%209.4%2014.1%209.4%2022.6l0%2037.5c0%208.5%203.4%2016.6%209.4%2022.6l13.3%2013.3c6%206%209.4%2014.1%209.4%2022.6l0%2018.7c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-2.7c0-8.5%203.4-16.6%209.4-22.6l45.3-45.3c6-6%209.4-14.1%209.4-22.6l0-34.7c0-17.7-14.3-32-32-32l-82.7%200c-8.5%200-16.6-3.4-22.6-9.4l-16-16c-4.2-4.2-6.6-10-6.6-16%200-12.5%2010.1-22.6%2022.6-22.6l34.7%200c12.5%200%2022.6-10.1%2022.6-22.6%200-6-2.4-11.8-6.6-16l-19.7-19.7C242%20130%20240%20125.1%20240%20120s2-10%205.7-13.7l17.3-17.3c5.8-5.8%209.1-13.7%209.1-21.9%200-7.2-2.4-13.7-6.4-18.9-3.2-.1-6.4-.2-9.6-.2-95.4%200-175.7%2064.2-200.3%20151.7zM464%20256c0-34.6-8.4-67.2-23.4-95.8-6.4%20.9-12.7%203.9-17.9%209.1l-13.4%2013.4c-6%206-9.4%2014.1-9.4%2022.6l0%2034.7c0%2017.7%2014.3%2032%2032%2032l24.1%200c2.5%200%205-.3%207.3-.8%20.4-5%20.5-10.1%20.5-15.2zM0%20256a256%20256%200%201%201%20512%200%20256%20256%200%201%201%20-512%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M55.7%20199.7l30.9%2030.9c6%206%2014.1%209.4%2022.6%209.4l21.5%200c8.5%200%2016.6%203.4%2022.6%209.4l29.3%2029.3c6%206%209.4%2014.1%209.4%2022.6l0%2037.5c0%208.5%203.4%2016.6%209.4%2022.6l13.3%2013.3c6%206%209.4%2014.1%209.4%2022.6l0%2018.7c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-2.7c0-8.5%203.4-16.6%209.4-22.6l45.3-45.3c6-6%209.4-14.1%209.4-22.6l0-34.7c0-17.7-14.3-32-32-32l-82.7%200c-8.5%200-16.6-3.4-22.6-9.4l-16-16c-4.2-4.2-6.6-10-6.6-16%200-12.5%2010.1-22.6%2022.6-22.6l34.7%200c12.5%200%2022.6-10.1%2022.6-22.6%200-6-2.4-11.8-6.6-16l-19.7-19.7C242%20130%20240%20125.1%20240%20120s2-10%205.7-13.7l17.3-17.3c5.8-5.8%209.1-13.7%209.1-21.9%200-7.2-2.4-13.7-6.4-18.9-3.2-.1-6.4-.2-9.6-.2-95.4%200-175.7%2064.2-200.3%20151.7zM464%20256c0-34.6-8.4-67.2-23.4-95.8-6.4%20.9-12.7%203.9-17.9%209.1l-13.4%2013.4c-6%206-9.4%2014.1-9.4%2022.6l0%2034.7c0%2017.7%2014.3%2032%2032%2032l24.1%200c2.5%200%205-.3%207.3-.8%20.4-5%20.5-10.1%20.5-15.2zM0%20256a256%20256%200%201%201%20512%200%20256%20256%200%201%201%20-512%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-file { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%2048L64%2048c-8.8%200-16%207.2-16%2016l0%20384c0%208.8%207.2%2016%2016%2016l256%200c8.8%200%2016-7.2%2016-16l0-240-88%200c-39.8%200-72-32.2-72-72l0-88zM316.1%20160L224%2067.9%20224%20136c0%2013.3%2010.7%2024%2024%2024l68.1%200zM0%2064C0%2028.7%2028.7%200%2064%200L197.5%200c17%200%2033.3%206.7%2045.3%2018.7L365.3%20141.3c12%2012%2018.7%2028.3%2018.7%2045.3L384%20448c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%2064z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%2048L64%2048c-8.8%200-16%207.2-16%2016l0%20384c0%208.8%207.2%2016%2016%2016l256%200c8.8%200%2016-7.2%2016-16l0-240-88%200c-39.8%200-72-32.2-72-72l0-88zM316.1%20160L224%2067.9%20224%20136c0%2013.3%2010.7%2024%2024%2024l68.1%200zM0%2064C0%2028.7%2028.7%200%2064%200L197.5%200c17%200%2033.3%206.7%2045.3%2018.7L365.3%20141.3c12%2012%2018.7%2028.3%2018.7%2045.3L384%20448c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%2064z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-file-lines { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2048l112%200%200%2088c0%2039.8%2032.2%2072%2072%2072l88%200%200%20240c0%208.8-7.2%2016-16%2016L64%20464c-8.8%200-16-7.2-16-16L48%2064c0-8.8%207.2-16%2016-16zM224%2067.9l92.1%2092.1-68.1%200c-13.3%200-24-10.7-24-24l0-68.1zM64%200C28.7%200%200%2028.7%200%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-261.5c0-17-6.7-33.3-18.7-45.3L242.7%2018.7C230.7%206.7%20214.5%200%20197.5%200L64%200zm56%20256c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-144%200zm0%2096c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-144%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2048l112%200%200%2088c0%2039.8%2032.2%2072%2072%2072l88%200%200%20240c0%208.8-7.2%2016-16%2016L64%20464c-8.8%200-16-7.2-16-16L48%2064c0-8.8%207.2-16%2016-16zM224%2067.9l92.1%2092.1-68.1%200c-13.3%200-24-10.7-24-24l0-68.1zM64%200C28.7%200%200%2028.7%200%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-261.5c0-17-6.7-33.3-18.7-45.3L242.7%2018.7C230.7%206.7%20214.5%200%20197.5%200L64%200zm56%20256c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-144%200zm0%2096c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-144%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-file-pen { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128.1%200c-35.3%200-64%2028.7-64%2064l0%20384c0%2035.3%2028.7%2064%2064%2064l146.2%200%2010.9-54.5c4.3-21.7%2015-41.6%2030.6-57.2l132.2-132.2%200-97.5c0-17-6.7-33.3-18.7-45.3L322.8%2018.7C310.8%206.7%20294.5%200%20277.6%200L128.1%200zM389.6%20176l-93.5%200c-13.3%200-24-10.7-24-24l0-93.5%20117.5%20117.5zM332.3%20466.9l-11.9%2059.6c-.2%20.9-.3%201.9-.3%202.9%200%208%206.5%2014.6%2014.6%2014.6%201%200%201.9-.1%202.9-.3l59.6-11.9c12.4-2.5%2023.8-8.6%2032.7-17.5l118.9-118.9-80-80-118.9%20118.9c-8.9%208.9-15%2020.3-17.5%2032.7zm267.8-123c22.1-22.1%2022.1-57.9%200-80s-57.9-22.1-80%200l-28.8%2028.8%2080%2080%2028.8-28.8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128.1%200c-35.3%200-64%2028.7-64%2064l0%20384c0%2035.3%2028.7%2064%2064%2064l146.2%200%2010.9-54.5c4.3-21.7%2015-41.6%2030.6-57.2l132.2-132.2%200-97.5c0-17-6.7-33.3-18.7-45.3L322.8%2018.7C310.8%206.7%20294.5%200%20277.6%200L128.1%200zM389.6%20176l-93.5%200c-13.3%200-24-10.7-24-24l0-93.5%20117.5%20117.5zM332.3%20466.9l-11.9%2059.6c-.2%20.9-.3%201.9-.3%202.9%200%208%206.5%2014.6%2014.6%2014.6%201%200%201.9-.1%202.9-.3l59.6-11.9c12.4-2.5%2023.8-8.6%2032.7-17.5l118.9-118.9-80-80-118.9%20118.9c-8.9%208.9-15%2020.3-17.5%2032.7zm267.8-123c22.1-22.1%2022.1-57.9%200-80s-57.9-22.1-80%200l-28.8%2028.8%2080%2080%2028.8-28.8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-floppy-disk { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2080c-8.8%200-16%207.2-16%2016l0%20320c0%208.8%207.2%2016%2016%2016l320%200c8.8%200%2016-7.2%2016-16l0-242.7c0-4.2-1.7-8.3-4.7-11.3L320%2086.6%20320%20176c0%2017.7-14.3%2032-32%2032l-160%200c-17.7%200-32-14.3-32-32l0-96-32%200zm80%200l0%2080%20128%200%200-80-128%200zM0%2096C0%2060.7%2028.7%2032%2064%2032l242.7%200c17%200%2033.3%206.7%2045.3%2018.7L429.3%20128c12%2012%2018.7%2028.3%2018.7%2045.3L448%20416c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096zM160%20320a64%2064%200%201%201%20128%200%2064%2064%200%201%201%20-128%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2080c-8.8%200-16%207.2-16%2016l0%20320c0%208.8%207.2%2016%2016%2016l320%200c8.8%200%2016-7.2%2016-16l0-242.7c0-4.2-1.7-8.3-4.7-11.3L320%2086.6%20320%20176c0%2017.7-14.3%2032-32%2032l-160%200c-17.7%200-32-14.3-32-32l0-96-32%200zm80%200l0%2080%20128%200%200-80-128%200zM0%2096C0%2060.7%2028.7%2032%2064%2032l242.7%200c17%200%2033.3%206.7%2045.3%2018.7L429.3%20128c12%2012%2018.7%2028.3%2018.7%2045.3L448%20416c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096zM160%20320a64%2064%200%201%201%20128%200%2064%2064%200%201%201%20-128%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-folder-open { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M56%20225.6L32.4%20296.2%2032.4%2096c0-35.3%2028.7-64%2064-64l138.7%200c13.8%200%2027.3%204.5%2038.4%2012.8l38.4%2028.8c5.5%204.2%2012.3%206.4%2019.2%206.4l117.3%200c35.3%200%2064%2028.7%2064%2064l0%2016-365.4%200c-41.3%200-78%2026.4-91.1%2065.6zM477.8%20448L99%20448c-32.8%200-55.9-32.1-45.5-63.2l48-144C108%20221.2%20126.4%20208%20147%20208l378.8%200c32.8%200%2055.9%2032.1%2045.5%2063.2l-48%20144c-6.5%2019.6-24.9%2032.8-45.5%2032.8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M56%20225.6L32.4%20296.2%2032.4%2096c0-35.3%2028.7-64%2064-64l138.7%200c13.8%200%2027.3%204.5%2038.4%2012.8l38.4%2028.8c5.5%204.2%2012.3%206.4%2019.2%206.4l117.3%200c35.3%200%2064%2028.7%2064%2064l0%2016-365.4%200c-41.3%200-78%2026.4-91.1%2065.6zM477.8%20448L99%20448c-32.8%200-55.9-32.1-45.5-63.2l48-144C108%20221.2%20126.4%20208%20147%20208l378.8%200c32.8%200%2055.9%2032.1%2045.5%2063.2l-48%20144c-6.5%2019.6-24.9%2032.8-45.5%2032.8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-genderless { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M192%20128a128%20128%200%201%201%200%20256%20128%20128%200%201%201%200-256zm0%20320a192%20192%200%201%200%200-384%20192%20192%200%201%200%200%20384z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M192%20128a128%20128%200%201%201%200%20256%20128%20128%200%201%201%200-256zm0%20320a192%20192%200%201%200%200-384%20192%20192%200%201%200%200%20384z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-html5 { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2032L34.9%20427.8%20191.5%20480%20349.1%20427.8%20384%2032%200%2032zM308.2%20159.9l-183.8%200%204.1%2049.4%20175.6%200-13.6%20148.4-97.9%2027%200%20.3-1.1%200-98.7-27.3-6-75.8%2047.7%200%203.5%2038.1%2053.5%2014.5%2053.7-14.5%206-62.2-166.9%200-12.8-145.6%20241.1%200-4.4%2047.7z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2032L34.9%20427.8%20191.5%20480%20349.1%20427.8%20384%2032%200%2032zM308.2%20159.9l-183.8%200%204.1%2049.4%20175.6%200-13.6%20148.4-97.9%2027%200%20.3-1.1%200-98.7-27.3-6-75.8%2047.7%200%203.5%2038.1%2053.5%2014.5%2053.7-14.5%206-62.2-166.9%200-12.8-145.6%20241.1%200-4.4%2047.7z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-indent { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM127.8%20268.6L25.8%20347.9C15.3%20356.1%200%20348.6%200%20335.3L0%20176.7c0-13.3%2015.3-20.8%2025.8-12.6l101.9%2079.3c8.2%206.4%208.2%2018.9%200%2025.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM127.8%20268.6L25.8%20347.9C15.3%20356.1%200%20348.6%200%20335.3L0%20176.7c0-13.3%2015.3-20.8%2025.8-12.6l101.9%2079.3c8.2%206.4%208.2%2018.9%200%2025.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-infinity { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256c0-88.4%2071.6-160%20160-160%2050.4%200%2097.8%2023.7%20128%2064l32%2042.7%2032-42.7c30.2-40.3%2077.6-64%20128-64%2088.4%200%20160%2071.6%20160%20160S568.4%20416%20480%20416c-50.4%200-97.8-23.7-128-64l-32-42.7-32%2042.7c-30.2%2040.3-77.6%2064-128%2064-88.4%200-160-71.6-160-160zm280%200l-43.2-57.6c-18.1-24.2-46.6-38.4-76.8-38.4-53%200-96%2043-96%2096s43%2096%2096%2096c30.2%200%2058.7-14.2%2076.8-38.4L280%20256zm80%200l43.2%2057.6c18.1%2024.2%2046.6%2038.4%2076.8%2038.4%2053%200%2096-43%2096-96s-43-96-96-96c-30.2%200-58.7%2014.2-76.8%2038.4L360%20256z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256c0-88.4%2071.6-160%20160-160%2050.4%200%2097.8%2023.7%20128%2064l32%2042.7%2032-42.7c30.2-40.3%2077.6-64%20128-64%2088.4%200%20160%2071.6%20160%20160S568.4%20416%20480%20416c-50.4%200-97.8-23.7-128-64l-32-42.7-32%2042.7c-30.2%2040.3-77.6%2064-128%2064-88.4%200-160-71.6-160-160zm280%200l-43.2-57.6c-18.1-24.2-46.6-38.4-76.8-38.4-53%200-96%2043-96%2096s43%2096%2096%2096c30.2%200%2058.7-14.2%2076.8-38.4L280%20256zm80%200l43.2%2057.6c18.1%2024.2%2046.6%2038.4%2076.8%2038.4%2053%200%2096-43%2096-96s-43-96-96-96c-30.2%200-58.7%2014.2-76.8%2038.4L360%20256z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-italic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-58.7%200-133.3%20320%2064%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l58.7%200%20133.3-320-64%200c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-58.7%200-133.3%20320%2064%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l58.7%200%20133.3-320-64%200c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-leaf { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M471.3%206.7C477.7%20.6%20487-1.6%20495.6%201.2%20505.4%204.5%20512%2013.7%20512%2024l0%20186.9c0%20131.2-108.1%20237.1-238.8%20237.1-77%200-143.4-49.5-167.5-118.7-35.4%2030.8-57.7%2076.1-57.7%20126.7%200%2013.3-10.7%2024-24%2024S0%20469.3%200%20456C0%20381.1%2038.2%20315.1%2096.1%20276.3%20131.4%20252.7%20173.5%20240%20216%20240l80%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-80%200c-39.7%200-77.3%208.8-111%2024.5%2023.3-70%2089.2-120.5%20167-120.5%2066.4%200%20115.8-22.1%20148.7-44%2019.2-12.8%2035.5-28.1%2050.7-45.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M471.3%206.7C477.7%20.6%20487-1.6%20495.6%201.2%20505.4%204.5%20512%2013.7%20512%2024l0%20186.9c0%20131.2-108.1%20237.1-238.8%20237.1-77%200-143.4-49.5-167.5-118.7-35.4%2030.8-57.7%2076.1-57.7%20126.7%200%2013.3-10.7%2024-24%2024S0%20469.3%200%20456C0%20381.1%2038.2%20315.1%2096.1%20276.3%20131.4%20252.7%20173.5%20240%20216%20240l80%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-80%200c-39.7%200-77.3%208.8-111%2024.5%2023.3-70%2089.2-120.5%20167-120.5%2066.4%200%20115.8-22.1%20148.7-44%2019.2-12.8%2035.5-28.1%2050.7-45.3z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-link { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M419.5%2096c-16.6%200-32.7%204.5-46.8%2012.7-15.8-16-34.2-29.4-54.5-39.5%2028.2-24%2064.1-37.2%20101.3-37.2%2086.4%200%20156.5%2070%20156.5%20156.5%200%2041.5-16.5%2081.3-45.8%20110.6l-71.1%2071.1c-29.3%2029.3-69.1%2045.8-110.6%2045.8-86.4%200-156.5-70-156.5-156.5%200-1.5%200-3%20.1-4.5%20.5-17.7%2015.2-31.6%2032.9-31.1s31.6%2015.2%2031.1%2032.9c0%20.9%200%201.8%200%202.6%200%2051.1%2041.4%2092.5%2092.5%2092.5%2024.5%200%2048-9.7%2065.4-27.1l71.1-71.1c17.3-17.3%2027.1-40.9%2027.1-65.4%200-51.1-41.4-92.5-92.5-92.5zM275.2%20173.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5%200-48%209.7-65.4%2027.1L91.1%20258.2c-17.3%2017.3-27.1%2040.9-27.1%2065.4%200%2051.1%2041.4%2092.5%2092.5%2092.5%2016.5%200%2032.6-4.4%2046.7-12.6%2015.8%2016%2034.2%2029.4%2054.6%2039.5-28.2%2023.9-64%2037.2-101.3%2037.2-86.4%200-156.5-70-156.5-156.5%200-41.5%2016.5-81.3%2045.8-110.6l71.1-71.1c29.3-29.3%2069.1-45.8%20110.6-45.8%2086.6%200%20156.5%2070.6%20156.5%20156.9%200%201.3%200%202.6%200%203.9-.4%2017.7-15.1%2031.6-32.8%2031.2s-31.6-15.1-31.2-32.8c0-.8%200-1.5%200-2.3%200-33.7-18-63.3-44.8-79.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M419.5%2096c-16.6%200-32.7%204.5-46.8%2012.7-15.8-16-34.2-29.4-54.5-39.5%2028.2-24%2064.1-37.2%20101.3-37.2%2086.4%200%20156.5%2070%20156.5%20156.5%200%2041.5-16.5%2081.3-45.8%20110.6l-71.1%2071.1c-29.3%2029.3-69.1%2045.8-110.6%2045.8-86.4%200-156.5-70-156.5-156.5%200-1.5%200-3%20.1-4.5%20.5-17.7%2015.2-31.6%2032.9-31.1s31.6%2015.2%2031.1%2032.9c0%20.9%200%201.8%200%202.6%200%2051.1%2041.4%2092.5%2092.5%2092.5%2024.5%200%2048-9.7%2065.4-27.1l71.1-71.1c17.3-17.3%2027.1-40.9%2027.1-65.4%200-51.1-41.4-92.5-92.5-92.5zM275.2%20173.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5%200-48%209.7-65.4%2027.1L91.1%20258.2c-17.3%2017.3-27.1%2040.9-27.1%2065.4%200%2051.1%2041.4%2092.5%2092.5%2092.5%2016.5%200%2032.6-4.4%2046.7-12.6%2015.8%2016%2034.2%2029.4%2054.6%2039.5-28.2%2023.9-64%2037.2-101.3%2037.2-86.4%200-156.5-70-156.5-156.5%200-41.5%2016.5-81.3%2045.8-110.6l71.1-71.1c29.3-29.3%2069.1-45.8%20110.6-45.8%2086.6%200%20156.5%2070.6%20156.5%20156.9%200%201.3%200%202.6%200%203.9-.4%2017.7-15.1%2031.6-32.8%2031.2s-31.6-15.1-31.2-32.8c0-.8%200-1.5%200-2.3%200-33.7-18-63.3-44.8-79.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-list-ol { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2072C0%2058.8%2010.7%2048%2024%2048l48%200c13.3%200%2024%2010.7%2024%2024l0%20104%2024%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-96%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l24%200%200-80-24%200C10.7%2096%200%2085.3%200%2072zM30.4%20301.2C41.8%20292.6%2055.7%20288%2070%20288l4.9%200c33.7%200%2061.1%2027.4%2061.1%2061.1%200%2019.6-9.4%2037.9-25.2%2049.4l-24%2017.5%2033.2%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-90.7%200C13.1%20464%200%20450.9%200%20434.7%200%20425.3%204.5%20416.5%2012.1%20411l70.5-51.3c3.4-2.5%205.4-6.4%205.4-10.6%200-7.2-5.9-13.1-13.1-13.1L70%20336c-3.9%200-7.7%201.3-10.8%203.6L38.4%20355.2c-10.6%208-25.6%205.8-33.6-4.8S-1%20324.8%209.6%20316.8l20.8-15.6zM224%2064l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2072C0%2058.8%2010.7%2048%2024%2048l48%200c13.3%200%2024%2010.7%2024%2024l0%20104%2024%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-96%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l24%200%200-80-24%200C10.7%2096%200%2085.3%200%2072zM30.4%20301.2C41.8%20292.6%2055.7%20288%2070%20288l4.9%200c33.7%200%2061.1%2027.4%2061.1%2061.1%200%2019.6-9.4%2037.9-25.2%2049.4l-24%2017.5%2033.2%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-90.7%200C13.1%20464%200%20450.9%200%20434.7%200%20425.3%204.5%20416.5%2012.1%20411l70.5-51.3c3.4-2.5%205.4-6.4%205.4-10.6%200-7.2-5.9-13.1-13.1-13.1L70%20336c-3.9%200-7.7%201.3-10.8%203.6L38.4%20355.2c-10.6%208-25.6%205.8-33.6-4.8S-1%20324.8%209.6%20316.8l20.8-15.6zM224%2064l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-list-ul { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48%20144a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zM192%2064c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L192%2064zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zM48%20464a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zM96%20256a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48%20144a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zM192%2064c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L192%2064zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zM48%20464a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zM96%20256a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-magnifying-glass { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376C296.3%20401.1%20253.9%20416%20208%20416%2093.1%20416%200%20322.9%200%20208S93.1%200%20208%200%20416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376C296.3%20401.1%20253.9%20416%20208%20416%2093.1%20416%200%20322.9%200%20208S93.1%200%20208%200%20416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-mars { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c0-17.7%2014.3-32%2032-32L480%200c17.7%200%2032%2014.3%2032%2032l0%20128c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-50.7-95%2095c19.5%2028.4%2031%2062.7%2031%2099.8%200%2097.2-78.8%20176-176%20176S32%20401.2%2032%20304%20110.8%20128%20208%20128c37%200%2071.4%2011.4%2099.8%2031l95-95-50.7%200c-17.7%200-32-14.3-32-32zM208%20416a112%20112%200%201%200%200-224%20112%20112%200%201%200%200%20224z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c0-17.7%2014.3-32%2032-32L480%200c17.7%200%2032%2014.3%2032%2032l0%20128c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-50.7-95%2095c19.5%2028.4%2031%2062.7%2031%2099.8%200%2097.2-78.8%20176-176%20176S32%20401.2%2032%20304%20110.8%20128%20208%20128c37%200%2071.4%2011.4%2099.8%2031l95-95-50.7%200c-17.7%200-32-14.3-32-32zM208%20416a112%20112%200%201%200%200-224%20112%20112%200%201%200%200%20224z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-microchip { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c-35.3%200-64%2028.7-64%2064l-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200c0%2035.3%2028.7%2064%2064%2064l0%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40c35.3%200%2064-28.7%2064-64l40%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40zM160%20128l192%200c17.7%200%2032%2014.3%2032%2032l0%20192c0%2017.7-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32l0-192c0-17.7%2014.3-32%2032-32zm16%2048l0%20160%20160%200%200-160-160%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c-35.3%200-64%2028.7-64%2064l-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200c0%2035.3%2028.7%2064%2064%2064l0%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40c35.3%200%2064-28.7%2064-64l40%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40zM160%20128l192%200c17.7%200%2032%2014.3%2032%2032l0%20192c0%2017.7-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32l0-192c0-17.7%2014.3-32%2032-32zm16%2048l0%20160%20160%200%200-160-160%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-microphone { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M192%200C139%200%2096%2043%2096%2096l0%20128c0%2053%2043%2096%2096%2096s96-43%2096-96l0-128c0-53-43-96-96-96zM48%20184c0-13.3-10.7-24-24-24S0%20170.7%200%20184l0%2040c0%2097.9%2073.3%20178.7%20168%20190.5l0%2049.5-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-49.5c94.7-11.8%20168-92.6%20168-190.5l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2079.5-64.5%20144-144%20144S48%20303.5%2048%20224l0-40z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M192%200C139%200%2096%2043%2096%2096l0%20128c0%2053%2043%2096%2096%2096s96-43%2096-96l0-128c0-53-43-96-96-96zM48%20184c0-13.3-10.7-24-24-24S0%20170.7%200%20184l0%2040c0%2097.9%2073.3%20178.7%20168%20190.5l0%2049.5-48%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l144%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-48%200%200-49.5c94.7-11.8%20168-92.6%20168-190.5l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c0%2079.5-64.5%20144-144%20144S48%20303.5%2048%20224l0-40z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-minus { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%20256c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-outdent { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M.4%2064c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-384%200C14.8%2096%20.4%2081.7%20.4%2064zm192%20128c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM.4%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-384%200c-17.7%200-32-14.3-32-32zM.7%20268.6c-8.2-6.4-8.2-18.9%200-25.3l101.9-79.3c10.5-8.2%2025.8-.7%2025.8%2012.6l0%20158.6c0%2013.3-15.3%2020.8-25.8%2012.6L.7%20268.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M.4%2064c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-384%200C14.8%2096%20.4%2081.7%20.4%2064zm192%20128c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM.4%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-384%200c-17.7%200-32-14.3-32-32zM.7%20268.6c-8.2-6.4-8.2-18.9%200-25.3l101.9-79.3c10.5-8.2%2025.8-.7%2025.8%2012.6l0%20158.6c0%2013.3-15.3%2020.8-25.8%2012.6L.7%20268.6z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-print { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2064C64%2028.7%2092.7%200%20128%200L341.5%200c17%200%2033.3%206.7%2045.3%2018.7l42.5%2042.5c12%2012%2018.7%2028.3%2018.7%2045.3l0%2037.5-384%200%200-80zM0%20256c0-35.3%2028.7-64%2064-64l384%200c35.3%200%2064%2028.7%2064%2064l0%2096c0%2017.7-14.3%2032-32%2032l-32%200%200%2064c0%2035.3-28.7%2064-64%2064l-256%200c-35.3%200-64-28.7-64-64l0-64-32%200c-17.7%200-32-14.3-32-32l0-96zM128%20416l0%2032%20256%200%200-96-256%200%200%2064zM456%20272a24%2024%200%201%200%20-48%200%2024%2024%200%201%200%2048%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2064C64%2028.7%2092.7%200%20128%200L341.5%200c17%200%2033.3%206.7%2045.3%2018.7l42.5%2042.5c12%2012%2018.7%2028.3%2018.7%2045.3l0%2037.5-384%200%200-80zM0%20256c0-35.3%2028.7-64%2064-64l384%200c35.3%200%2064%2028.7%2064%2064l0%2096c0%2017.7-14.3%2032-32%2032l-32%200%200%2064c0%2035.3-28.7%2064-64%2064l-256%200c-35.3%200-64-28.7-64-64l0-64-32%200c-17.7%200-32-14.3-32-32l0-96zM128%20416l0%2032%20256%200%200-96-256%200%200%2064zM456%20272a24%2024%200%201%200%20-48%200%2024%2024%200%201%200%2048%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-rocket { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20320L24.5%20320c-24.9%200-40.2-27.1-27.4-48.5L50%20183.3C58.7%20168.8%2074.3%20160%2091.2%20160l95%200c76.1-128.9%20189.6-135.4%20265.5-124.3%2012.8%201.9%2022.8%2011.9%2024.6%2024.6%2011.1%2075.9%204.6%20189.4-124.3%20265.5l0%2095c0%2016.9-8.8%2032.5-23.3%2041.2l-88.2%2052.9c-21.3%2012.8-48.5-2.6-48.5-27.4L192%20384c0-35.3-28.7-64-64-64l-.1%200zM400%20160a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20320L24.5%20320c-24.9%200-40.2-27.1-27.4-48.5L50%20183.3C58.7%20168.8%2074.3%20160%2091.2%20160l95%200c76.1-128.9%20189.6-135.4%20265.5-124.3%2012.8%201.9%2022.8%2011.9%2024.6%2024.6%2011.1%2075.9%204.6%20189.4-124.3%20265.5l0%2095c0%2016.9-8.8%2032.5-23.3%2041.2l-88.2%2052.9c-21.3%2012.8-48.5-2.6-48.5-27.4L192%20384c0-35.3-28.7-64-64-64l-.1%200zM400%20160a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-rotate { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480.1%20192l7.9%200c13.3%200%2024-10.7%2024-24l0-144c0-9.7-5.8-18.5-14.8-22.2S477.9%20.2%20471%207L419.3%2058.8C375%2022.1%20318%200%20256%200%20127%200%2020.3%2095.4%202.6%20219.5%20.1%20237%2012.2%20253.2%2029.7%20255.7s33.7-9.7%2036.2-27.1C79.2%20135.5%20159.3%2064%20256%2064%20300.4%2064%20341.2%2079%20373.7%20104.3L327%20151c-6.9%206.9-8.9%2017.2-5.2%2026.2S334.3%20192%20344%20192l136.1%200zm29.4%20100.5c2.5-17.5-9.7-33.7-27.1-36.2s-33.7%209.7-36.2%2027.1c-13.3%2093-93.4%20164.5-190.1%20164.5-44.4%200-85.2-15-117.7-40.3L185%20361c6.9-6.9%208.9-17.2%205.2-26.2S177.7%20320%20168%20320L24%20320c-13.3%200-24%2010.7-24%2024L0%20488c0%209.7%205.8%2018.5%2014.8%2022.2S34.1%20511.8%2041%20505l51.8-51.8C137%20489.9%20194%20512%20256%20512%20385%20512%20491.7%20416.6%20509.4%20292.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480.1%20192l7.9%200c13.3%200%2024-10.7%2024-24l0-144c0-9.7-5.8-18.5-14.8-22.2S477.9%20.2%20471%207L419.3%2058.8C375%2022.1%20318%200%20256%200%20127%200%2020.3%2095.4%202.6%20219.5%20.1%20237%2012.2%20253.2%2029.7%20255.7s33.7-9.7%2036.2-27.1C79.2%20135.5%20159.3%2064%20256%2064%20300.4%2064%20341.2%2079%20373.7%20104.3L327%20151c-6.9%206.9-8.9%2017.2-5.2%2026.2S334.3%20192%20344%20192l136.1%200zm29.4%20100.5c2.5-17.5-9.7-33.7-27.1-36.2s-33.7%209.7-36.2%2027.1c-13.3%2093-93.4%20164.5-190.1%20164.5-44.4%200-85.2-15-117.7-40.3L185%20361c6.9-6.9%208.9-17.2%205.2-26.2S177.7%20320%20168%20320L24%20320c-13.3%200-24%2010.7-24%2024L0%20488c0%209.7%205.8%2018.5%2014.8%2022.2S34.1%20511.8%2041%20505l51.8-51.8C137%20489.9%20194%20512%20256%20512%20385%20512%20491.7%20416.6%20509.4%20292.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-rotate-right { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M488%20192l-144%200c-9.7%200-18.5-5.8-22.2-14.8s-1.7-19.3%205.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5%2015.9-75%2075-75%20196.5%200%20271.5s196.5%2075%20271.5%200c8.2-8.2%2015.5-16.9%2021.9-26.1%2010.1-14.5%2030.1-18%2044.6-7.9s18%2030.1%207.9%2044.6c-8.5%2012.2-18.2%2023.8-29.1%2034.7-100%20100-262.1%20100-362%200S-25%20175%2075%2075c94.3-94.3%20243.7-99.6%20344.3-16.2L471%207c6.9-6.9%2017.2-8.9%2026.2-5.2S512%2014.3%20512%2024l0%20144c0%2013.3-10.7%2024-24%2024z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M488%20192l-144%200c-9.7%200-18.5-5.8-22.2-14.8s-1.7-19.3%205.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5%2015.9-75%2075-75%20196.5%200%20271.5s196.5%2075%20271.5%200c8.2-8.2%2015.5-16.9%2021.9-26.1%2010.1-14.5%2030.1-18%2044.6-7.9s18%2030.1%207.9%2044.6c-8.5%2012.2-18.2%2023.8-29.1%2034.7-100%20100-262.1%20100-362%200S-25%20175%2075%2075c94.3-94.3%20243.7-99.6%20344.3-16.2L471%207c6.9-6.9%2017.2-8.9%2026.2-5.2S512%2014.3%20512%2024l0%20144c0%2013.3-10.7%2024-24%2024z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-square { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2032l320%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096C0%2060.7%2028.7%2032%2064%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2032l320%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096C0%2060.7%2028.7%2032%2064%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-stop { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2032l320%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096C0%2060.7%2028.7%2032%2064%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%2032l320%200c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064L64%20480c-35.3%200-64-28.7-64-64L0%2096C0%2060.7%2028.7%2032%2064%2032z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-sun { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288-32c8.4%200%2016.3%204.4%2020.6%2011.7L364.1%2072.3%20468.9%2046c8.2-2%2016.9%20.4%2022.8%206.3S500%2067%20498%2075.1l-26.3%20104.7%2092.7%2055.5c7.2%204.3%2011.7%2012.2%2011.7%2020.6s-4.4%2016.3-11.7%2020.6L471.7%20332.1%20498%20436.8c2%208.2-.4%2016.9-6.3%2022.8S477%20468%20468.9%20466l-104.7-26.3-55.5%2092.7c-4.3%207.2-12.2%2011.7-20.6%2011.7s-16.3-4.4-20.6-11.7L211.9%20439.7%20107.2%20466c-8.2%202-16.8-.4-22.8-6.3S76%20445%2078%20436.8l26.2-104.7-92.6-55.5C4.4%20272.2%200%20264.4%200%20256s4.4-16.3%2011.7-20.6L104.3%20179.9%2078%2075.1c-2-8.2%20.3-16.8%206.3-22.8S99%2044%20107.2%2046l104.7%2026.2%2055.5-92.6%201.8-2.6c4.5-5.7%2011.4-9.1%2018.8-9.1zm0%20144a144%20144%200%201%200%200%20288%20144%20144%200%201%200%200-288zm0%20240a96%2096%200%201%201%200-192%2096%2096%200%201%201%200%20192z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288-32c8.4%200%2016.3%204.4%2020.6%2011.7L364.1%2072.3%20468.9%2046c8.2-2%2016.9%20.4%2022.8%206.3S500%2067%20498%2075.1l-26.3%20104.7%2092.7%2055.5c7.2%204.3%2011.7%2012.2%2011.7%2020.6s-4.4%2016.3-11.7%2020.6L471.7%20332.1%20498%20436.8c2%208.2-.4%2016.9-6.3%2022.8S477%20468%20468.9%20466l-104.7-26.3-55.5%2092.7c-4.3%207.2-12.2%2011.7-20.6%2011.7s-16.3-4.4-20.6-11.7L211.9%20439.7%20107.2%20466c-8.2%202-16.8-.4-22.8-6.3S76%20445%2078%20436.8l26.2-104.7-92.6-55.5C4.4%20272.2%200%20264.4%200%20256s4.4-16.3%2011.7-20.6L104.3%20179.9%2078%2075.1c-2-8.2%20.3-16.8%206.3-22.8S99%2044%20107.2%2046l104.7%2026.2%2055.5-92.6%201.8-2.6c4.5-5.7%2011.4-9.1%2018.8-9.1zm0%20144a144%20144%200%201%200%200%20288%20144%20144%200%201%200%200-288zm0%20240a96%2096%200%201%201%200-192%2096%2096%200%201%201%200%20192z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-table { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%2032c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064l-320%200-6.5-.3C25.2%20476.4%200%20449.1%200%20416L0%2096C0%2060.7%2028.7%2032%2064%2032l320%200zM64%20320l0%2096%20128%200%200-96-128%200zm192%200l0%2096%20128%200%200-96-128%200zM64%20256l128%200%200-96-128%200%200%2096zm192%200l128%200%200-96-128%200%200%2096z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%2032c35.3%200%2064%2028.7%2064%2064l0%20320c0%2035.3-28.7%2064-64%2064l-320%200-6.5-.3C25.2%20476.4%200%20449.1%200%20416L0%2096C0%2060.7%2028.7%2032%2064%2032l320%200zM64%20320l0%2096%20128%200%200-96-128%200zm192%200l0%2096%20128%200%200-96-128%200zM64%20256l128%200%200-96-128%200%200%2096zm192%200l128%200%200-96-128%200%200%2096z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-text-slash { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M41-24.9c-9.4-9.4-24.6-9.4-33.9%200S-2.3-.3%207%209.1l528%20528c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9L322.7%20256.9%20368.2%2096%20471%2096%20465%20120.2c-4.3%2017.1%206.1%2034.5%2023.3%2038.8s34.5-6.1%2038.8-23.3l11-44.1C545.6%2061.3%20522.7%2032%20491.5%2032l-319%200c-19.8%200-37.3%2012.1-44.5%2030.1l-87-87zM180.4%20114.5l4.6-18.5%20116.7%200-30.8%20109-90.5-90.5zM241%20310.8L211.3%20416%20160%20416c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l160%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-42.2%200%2015.1-53.3-51.9-51.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M41-24.9c-9.4-9.4-24.6-9.4-33.9%200S-2.3-.3%207%209.1l528%20528c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9L322.7%20256.9%20368.2%2096%20471%2096%20465%20120.2c-4.3%2017.1%206.1%2034.5%2023.3%2038.8s34.5-6.1%2038.8-23.3l11-44.1C545.6%2061.3%20522.7%2032%20491.5%2032l-319%200c-19.8%200-37.3%2012.1-44.5%2030.1l-87-87zM180.4%20114.5l4.6-18.5%20116.7%200-30.8%20109-90.5-90.5zM241%20310.8L211.3%20416%20160%20416c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l160%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-42.2%200%2015.1-53.3-51.9-51.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-trash-can { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M136.7%205.9C141.1-7.2%20153.3-16%20167.1-16l113.9%200c13.8%200%2026%208.8%2030.4%2021.9L320%2032%20416%2032c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l96%200%208.7-26.1zM32%20144l384%200%200%20304c0%2035.3-28.7%2064-64%2064L96%20512c-35.3%200-64-28.7-64-64l0-304zm88%2064c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24zm104%200c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24zm104%200c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M136.7%205.9C141.1-7.2%20153.3-16%20167.1-16l113.9%200c13.8%200%2026%208.8%2030.4%2021.9L320%2032%20416%2032c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064S14.3%2032%2032%2032l96%200%208.7-26.1zM32%20144l384%200%200%20304c0%2035.3-28.7%2064-64%2064L96%20512c-35.3%200-64-28.7-64-64l0-304zm88%2064c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24zm104%200c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24zm104%200c-13.3%200-24%2010.7-24%2024l0%20192c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-192c0-13.3-10.7-24-24-24z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-user { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%20248a120%20120%200%201%200%200-240%20120%20120%200%201%200%200%20240zm-29.7%2056C95.8%20304%2016%20383.8%2016%20482.3%2016%20498.7%2029.3%20512%2045.7%20512l356.6%200c16.4%200%2029.7-13.3%2029.7-29.7%200-98.5-79.8-178.3-178.3-178.3l-59.4%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%20248a120%20120%200%201%200%200-240%20120%20120%200%201%200%200%20240zm-29.7%2056C95.8%20304%2016%20383.8%2016%20482.3%2016%20498.7%2029.3%20512%2045.7%20512l356.6%200c16.4%200%2029.7-13.3%2029.7-29.7%200-98.5-79.8-178.3-178.3-178.3l-59.4%200z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-venus { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M80%20176a112%20112%200%201%201%20224%200%20112%20112%200%201%201%20-224%200zM223.9%20349.1C305.9%20334.1%20368%20262.3%20368%20176%20368%2078.8%20289.2%200%20192%200S16%2078.8%2016%20176c0%2086.3%2062.1%20158.1%20144.1%20173.1-.1%201-.1%201.9-.1%202.9l0%2064-32%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l32%200%200%2032c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-32%2032%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-32%200%200-64c0-1%200-1.9-.1-2.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M80%20176a112%20112%200%201%201%20224%200%20112%20112%200%201%201%20-224%200zM223.9%20349.1C305.9%20334.1%20368%20262.3%20368%20176%20368%2078.8%20289.2%200%20192%200S16%2078.8%2016%20176c0%2086.3%2062.1%20158.1%20144.1%20173.1-.1%201-.1%201.9-.1%202.9l0%2064-32%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l32%200%200%2032c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-32%2032%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-32%200%200-64c0-1%200-1.9-.1-2.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-wand-magic-sparkles { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M263.4-27L278.2%209.8%20315%2024.6c3%201.2%205%204.2%205%207.4s-2%206.2-5%207.4L278.2%2054.2%20263.4%2091c-1.2%203-4.2%205-7.4%205s-6.2-2-7.4-5L233.8%2054.2%20197%2039.4c-3-1.2-5-4.2-5-7.4s2-6.2%205-7.4L233.8%209.8%20248.6-27c1.2-3%204.2-5%207.4-5s6.2%202%207.4%205zM110.7%2041.7l21.5%2050.1%2050.1%2021.5c5.9%202.5%209.7%208.3%209.7%2014.7s-3.8%2012.2-9.7%2014.7l-50.1%2021.5-21.5%2050.1c-2.5%205.9-8.3%209.7-14.7%209.7s-12.2-3.8-14.7-9.7L59.8%20164.2%209.7%20142.7C3.8%20140.2%200%20134.4%200%20128s3.8-12.2%209.7-14.7L59.8%2091.8%2081.3%2041.7C83.8%2035.8%2089.6%2032%2096%2032s12.2%203.8%2014.7%209.7zM464%20304c6.4%200%2012.2%203.8%2014.7%209.7l21.5%2050.1%2050.1%2021.5c5.9%202.5%209.7%208.3%209.7%2014.7s-3.8%2012.2-9.7%2014.7l-50.1%2021.5-21.5%2050.1c-2.5%205.9-8.3%209.7-14.7%209.7s-12.2-3.8-14.7-9.7l-21.5-50.1-50.1-21.5c-5.9-2.5-9.7-8.3-9.7-14.7s3.8-12.2%209.7-14.7l50.1-21.5%2021.5-50.1c2.5-5.9%208.3-9.7%2014.7-9.7zM460%200c11%200%2021.6%204.4%2029.5%2012.2l42.3%2042.3C539.6%2062.4%20544%2073%20544%2084s-4.4%2021.6-12.2%2029.5l-88.2%2088.2-101.3-101.3%2088.2-88.2C438.4%204.4%20449%200%20460%200zM44.2%20398.5L308.4%20134.3%20409.7%20235.6%20145.5%20499.8C137.6%20507.6%20127%20512%20116%20512s-21.6-4.4-29.5-12.2L44.2%20457.5C36.4%20449.6%2032%20439%2032%20428s4.4-21.6%2012.2-29.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M263.4-27L278.2%209.8%20315%2024.6c3%201.2%205%204.2%205%207.4s-2%206.2-5%207.4L278.2%2054.2%20263.4%2091c-1.2%203-4.2%205-7.4%205s-6.2-2-7.4-5L233.8%2054.2%20197%2039.4c-3-1.2-5-4.2-5-7.4s2-6.2%205-7.4L233.8%209.8%20248.6-27c1.2-3%204.2-5%207.4-5s6.2%202%207.4%205zM110.7%2041.7l21.5%2050.1%2050.1%2021.5c5.9%202.5%209.7%208.3%209.7%2014.7s-3.8%2012.2-9.7%2014.7l-50.1%2021.5-21.5%2050.1c-2.5%205.9-8.3%209.7-14.7%209.7s-12.2-3.8-14.7-9.7L59.8%20164.2%209.7%20142.7C3.8%20140.2%200%20134.4%200%20128s3.8-12.2%209.7-14.7L59.8%2091.8%2081.3%2041.7C83.8%2035.8%2089.6%2032%2096%2032s12.2%203.8%2014.7%209.7zM464%20304c6.4%200%2012.2%203.8%2014.7%209.7l21.5%2050.1%2050.1%2021.5c5.9%202.5%209.7%208.3%209.7%2014.7s-3.8%2012.2-9.7%2014.7l-50.1%2021.5-21.5%2050.1c-2.5%205.9-8.3%209.7-14.7%209.7s-12.2-3.8-14.7-9.7l-21.5-50.1-50.1-21.5c-5.9-2.5-9.7-8.3-9.7-14.7s3.8-12.2%209.7-14.7l50.1-21.5%2021.5-50.1c2.5-5.9%208.3-9.7%2014.7-9.7zM460%200c11%200%2021.6%204.4%2029.5%2012.2l42.3%2042.3C539.6%2062.4%20544%2073%20544%2084s-4.4%2021.6-12.2%2029.5l-88.2%2088.2-101.3-101.3%2088.2-88.2C438.4%204.4%20449%200%20460%200zM44.2%20398.5L308.4%20134.3%20409.7%20235.6%20145.5%20499.8C137.6%20507.6%20127%20512%20116%20512s-21.6-4.4-29.5-12.2L44.2%20457.5C36.4%20449.6%2032%20439%2032%20428s4.4-21.6%2012.2-29.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .fa-xmark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M55.1%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L147.2%20256%209.9%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192.5%20301.3%20329.9%20438.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.8%20256%20375.1%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192.5%20210.7%2055.1%2073.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22black%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C!--!%20Font%20Awesome%20Free%207.3.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202026%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M55.1%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L147.2%20256%209.9%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192.5%20301.3%20329.9%20438.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.8%20256%20375.1%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192.5%20210.7%2055.1%2073.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } /* FA utilities actually used on the site */ .fa-spin { animation: fa-spin 2s infinite linear; } @keyframes fa-spin { to { transform: rotate(360deg); } } /* §4 ICONS — generated: end */ /* ═══════════════════════════════════════════════════════════════════ PAGE: AI-HOME — scoped to [data-page="ai-home"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="ai-home"]) { --accent-olive: var(--accent); --accent-mint: var(--accent-light); --rim-light: rgba(201, 100, 120, 0.2); } [data-page="ai-home"] { transition: background-color 0.3s ease, color 0.3s ease; } /* .discord rules removed — shared .discord in src/site.css §3 */ /* --- Flipping Storybook --- */ /* Open book with a leather cover, stacked page edges and a bookmark ribbon. The right leaf turns over the spine in 3D via the Web Animations API (script at the bottom): JS owns the whole cycle so the word swap and the leaf reset land in the same paint — no event-timing flashes. The leaf also rests slightly ABOVE the page plane (translateZ) so coplanar z-fighting can never flicker. */ [data-page="ai-home"] .book-scene { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } [data-page="ai-home"] .book-wrap { width: 100%; display: flex; justify-content: center; perspective: 1300px; animation: book-bob 4.5s ease-in-out infinite; } [data-page="ai-home"] .book { position: relative; width: min(82%, 440px); aspect-ratio: 5 / 3.2; transform: rotateX(7deg); transform-style: preserve-3d; --paper: color-mix(in srgb, var(--bg-elevated), white 55%); --paper-2: color-mix(in srgb, var(--bg-elevated), black 5%); --paper-edge: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated)); --rule: color-mix(in srgb, var(--accent) 11%, transparent); --rule-lines: repeating-linear-gradient(to bottom, transparent 0 1.15em, var(--rule) 1.15em calc(1.15em + 1px)); } .dark [data-page="ai-home"] .book { --paper: color-mix(in srgb, var(--bg-elevated), white 8%); --paper-2: color-mix(in srgb, var(--bg-elevated), white 3%); --paper-edge: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)); --rule: color-mix(in srgb, var(--accent) 16%, transparent); } /* Leather cover peeking out around the page block, with a spine crease down the middle and a darker board edge at the bottom */ [data-page="ai-home"] .book-cover { position: absolute; inset: -3.5% -2.8% -8.5% -2.8%; border-radius: 12px; background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.28) 50%, transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--accent), black 10%), color-mix(in srgb, var(--accent), black 38%)); box-shadow: 0 26px 36px -22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -6px 0 -3px rgba(0, 0, 0, 0.25); } /* Bookmark ribbon hanging out of the gutter, over the bottom cover */ [data-page="ai-home"] .book-ribbon { position: absolute; left: 50%; bottom: -10.5%; width: 4.5%; height: 17%; transform: translateX(-50%) rotate(2.5deg); background: linear-gradient(180deg, color-mix(in srgb, var(--accent), black 48%), color-mix(in srgb, var(--accent), black 22%)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)); } [data-page="ai-home"] .book-page, [data-page="ai-home"] .leaf-face { background-color: var(--paper); /* layer 1: paper curving down into the gutter (overridden per side below); layer 2: faint ruled lines so the pages read as written-in */ background-image: linear-gradient(to right, transparent, transparent), var(--rule-lines); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, 74% 78%; background-position: 0 0, center 65%; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; padding: 7% 5%; overflow: hidden; text-align: center; } [data-page="ai-home"] .book-page { position: absolute; top: 0; height: 100%; width: 50%; } /* Stacked paper edges below the spread give the block thickness */ [data-page="ai-home"] .book-page--left { left: 0; border-radius: 8px 2px 2px 8px; box-shadow: inset -16px 0 18px -14px rgba(0, 0, 0, 0.28), 0 2px 0 0 var(--paper-2), 0 4px 0 0 var(--paper-edge), 0 6px 0 -1px var(--paper-2), 0 8px 0 -1px var(--paper-edge); } [data-page="ai-home"] .book-page--right { right: 0; border-radius: 2px 8px 8px 2px; box-shadow: inset 16px 0 18px -14px rgba(0, 0, 0, 0.28), 0 2px 0 0 var(--paper-2), 0 4px 0 0 var(--paper-edge), 0 6px 0 -1px var(--paper-2), 0 8px 0 -1px var(--paper-edge); } [data-page="ai-home"] .book-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; /* rest a hair above the page plane — never coplanar, never z-fights with the page it covers */ transform: translateZ(0.8px); z-index: 2; } [data-page="ai-home"] .leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } [data-page="ai-home"] .leaf-face--front { border-radius: 2px 8px 8px 2px; box-shadow: inset 16px 0 18px -14px rgba(0, 0, 0, 0.28); } [data-page="ai-home"] .leaf-face--back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; box-shadow: inset -16px 0 18px -14px rgba(0, 0, 0, 0.28); } /* Paper curves down into the gutter on the spine side of each page. Right-hand surfaces (base right page + leaf front) shade left; left-hand surfaces (base left page + leaf back) shade right. */ [data-page="ai-home"] .book-page--left, [data-page="ai-home"] .leaf-face--back { background-image: linear-gradient(to right, transparent 72%, rgba(0, 0, 0, 0.05) 90%, rgba(0, 0, 0, 0.14) 100%), var(--rule-lines); } [data-page="ai-home"] .book-page--right, [data-page="ai-home"] .leaf-face--front { background-image: linear-gradient(to left, transparent 72%, rgba(0, 0, 0, 0.05) 90%, rgba(0, 0, 0, 0.14) 100%), var(--rule-lines); } /* Soft floor shadow so the floating book sits on something */ [data-page="ai-home"] .book-floor-shadow { width: 46%; max-width: 250px; height: 20px; margin-top: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3), transparent 68%); animation: book-floor 4.5s ease-in-out infinite; } /* Page typography — the fun part */ [data-page="ai-home"] .page-word { font-family: 'Century', Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(1.1rem, 3.4vw, 1.55rem); color: var(--accent); transform: rotate(-4deg); text-decoration: underline; text-decoration-style: wavy; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; white-space: nowrap; } [data-page="ai-home"] .page-line { font-size: clamp(0.58rem, 1.6vw, 0.76rem); font-style: italic; line-height: 1.6; color: var(--text-secondary); white-space: nowrap; } [data-page="ai-home"] .page-caption { font-size: clamp(0.52rem, 1.4vw, 0.66rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); } [data-page="ai-home"] .page-doodle { font-size: clamp(0.56rem, 1.5vw, 0.72rem); letter-spacing: 0.4em; color: color-mix(in srgb, var(--accent) 65%, transparent); margin-top: 0.4em; } @keyframes book-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } } @keyframes book-floor { 0%, 100% { transform: scaleX(1); opacity: 0.85; } 50% { transform: scaleX(0.92); opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { [data-page="ai-home"] .book-wrap, [data-page="ai-home"] .book-floor-shadow { animation: none; } } /* --- Apple Color Gradient Slide --- */ [data-page="ai-home"] .apple-color-cycle { --base-color: #111111; background: linear-gradient(to right, var(--base-color) 0%, var(--base-color) 35%, #61bb46 40%, /* Green */ #fdb827 44%, /* Yellow */ #f5821f 48%, /* Orange */ #e03a3e 52%, /* Red */ #963d97 56%, /* Purple */ #009ddc 60%, /* Blue */ var(--base-color) 65%, var(--base-color) 100%); background-size: 300% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: apple-gradient-slide 5s linear infinite; /* clip-text + tight line-height shaves glyph bottoms; pad to protect descenders */ display: inline-block; line-height: 1.1; padding-bottom: 0.12em; } .dark [data-page="ai-home"] .apple-color-cycle { --base-color: #ffffff; } [data-page="ai-home"] .bdh-neural-card { position: relative; overflow: hidden; width: min(100%, 440px); margin-inline: auto; } [data-page="ai-home"] .bdh-neuron-map { width: min(100%, 340px); margin: 0 auto; display: block; } [data-page="ai-home"] .bdh-map-ring, [data-page="ai-home"] .bdh-map-link { fill: none; stroke: color-mix(in srgb, var(--accent) 28%, var(--border-strong)); } [data-page="ai-home"] .bdh-map-ring { stroke-dasharray: 5 8; opacity: 0.7; } [data-page="ai-home"] .bdh-map-link { stroke-width: 1.5; opacity: 0.72; } [data-page="ai-home"] .bdh-map-neuron { fill: color-mix(in srgb, var(--bg-elevated), white 26%); stroke: color-mix(in srgb, var(--accent) 34%, var(--border)); stroke-width: 1.5; } .dark [data-page="ai-home"] .bdh-map-neuron { fill: color-mix(in srgb, var(--bg-elevated), white 8%); } [data-page="ai-home"] .bdh-map-neuron--core { fill: var(--accent); stroke: color-mix(in srgb, var(--accent), white 24%); } [data-page="ai-home"] .bdh-map-label { fill: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-anchor: middle; } [data-page="ai-home"] .bdh-map-label--core { fill: white; } @keyframes apple-gradient-slide { 0% { background-position: 0% center; } 100% { background-position: 100% center; } } /* ═══════════════════════════════════════════════════════════════════ PAGE: CHAT — scoped to [data-page="chat"] ═══════════════════════════════════════════════════════════════════ */ [data-page="chat"] .shimmer-active { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color), white 40%), transparent); background-size: 200% 100%; animation: shimmer-btn 1.5s infinite; } .dark [data-page="chat"] .shimmer-active { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color), transparent 80%), transparent); background-size: 200% 100%; animation: shimmer-btn 1.5s infinite; } [data-page="chat"] button, [data-page="chat"] a, [data-page="chat"] input, [data-page="chat"] select, [data-page="chat"] textarea, [data-page="chat"] [class*="transition"], [data-page="chat"] [class*="hover:"], [data-page="chat"] .__menu-item, [data-page="chat"] .skuomorphic-btn { transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; } [data-page="chat"] .no-scrollbar::-webkit-scrollbar { display: none; } [data-page="chat"]::before { content: ""; position: fixed; inset: 0; background-color: var(--accent-tint); pointer-events: none; z-index: 0; } [data-page="chat"] aside { position: fixed; top: 0; bottom: 0; left: 0; z-index: 2500; width: 100%; overflow: hidden; /* Elements inside keep fixed positions; aside clips them as width changes */ transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform: translateZ(0); backface-visibility: hidden; } @media (max-width: 1023px) { [data-page="chat"] #sidebar { margin: var(--sb-float-gap); height: calc(100% - 2 * var(--sb-float-gap)); border-radius: var(--sb-radius); } /* Slide fully off-canvas, clearing the left margin + shadow. */ [data-page="chat"] #sidebar.-translate-x-full { transform: translateX(calc(-100% - var(--sb-float-gap) - 6px)); } } [data-page="chat"] #sidebar-full-content { contain: layout style; } [data-page="chat"] #sidebar-history-area { contain: layout style; } [data-page="chat"] aside::before { content: ""; position: absolute; inset: 0; /* Floating panel matches the neutral floating nav (.ov-nav__bar): the sidebar keeps its neutral --sb-float-surface, and the canvas behind it stays neutral too — no accent wash anywhere (--sidebar-tint was removed; --accent-tint is transparent). */ background-color: transparent; pointer-events: none; z-index: -1; } [data-page="chat"] #sidebar-mini-content { display: none; } [data-page="chat"] #sidebar-full-content { display: flex; width: var(--sidebar-width); min-width: var(--sidebar-width); flex-shrink: 0; } @media (min-width: 1024px) { [data-page="chat"] aside { position: static; width: var(--sidebar-width); margin: var(--sb-float-gap) 0 var(--sb-float-gap) var(--sb-float-gap); transform: none !important; } [data-page="chat"].sidebar-collapsed aside { width: var(--sidebar-rail-width) !important; } [data-page="chat"].sidebar-collapsed #sidebar { border-radius: 16px; } } /* ── Sidebar row text — fades via CSS, icons always visible ─ */ [data-page="chat"] .sb-row-text { white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.18s ease-out 0.08s; } [data-page="chat"].sidebar-collapsed .sb-row-text { opacity: 0; pointer-events: none; transition: opacity 0.08s ease-in; } /* Hide chat history + folders in collapsed rail */ [data-page="chat"] #sidebar-history-area { opacity: 1; transition: opacity 0.18s ease-out 0.08s; } [data-page="chat"].sidebar-collapsed #sidebar-history-area { opacity: 0; pointer-events: none; transition: opacity 0.08s ease-in; } @media (prefers-reduced-motion: reduce) { [data-page="chat"] #sidebar-history-area, [data-page="chat"] .sb-row-text, [data-page="chat"] aside { transition: none !important; } [data-page="chat"] .sb-nav-item:active, [data-page="chat"] .sb-new-chat-btn:active { transform: none !important; } } /* ── Sidebar redesign ─────────────────────────────────────── */ /* Recessed surface: crisp inner edges + a soft depth shadow to the right so the sidebar reads as a distinct plane under the chat. */ [data-page="chat"] #sidebar { background: var(--sb-float-surface); border: 1px solid var(--sb-float-border); border-radius: var(--sb-radius); box-shadow: var(--sb-float-shadow); } @media (prefers-reduced-motion: no-preference) { [data-page="chat"] #sidebar { transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } } [data-page="chat"] .sb-icon-btn { width: 2.5rem; height: 2.5rem; padding: 0; /* fixed round size; flex centers the glyph */ flex: none; /* stay square — never shrink */ display: flex; align-items: center; justify-content: center; border-radius: 9999px; /* full circle, same language as the floating capsules */ background: transparent; color: var(--text-secondary); cursor: pointer; /* same finish + motion as the top-right capsule icon buttons: transparent at rest, subtle hover tint, and a press-scale — all via theme tokens so it reads correctly in both light and dark mode. */ transition: color 0.2s ease, background-color 0.2s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-page="chat"] .sb-icon-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); transform: scale(1.14); /* playful pop out on hover (overshoot easing) */ } [data-page="chat"] .sb-icon-btn:active { transform: scale(0.86); /* satisfying squish on press */ } [data-page="chat"] .sb-nav-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9999px; color: var(--text-secondary); transition: background 0.18s ease, color 0.2s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); } /* Collapsed: suppress full-width rect, highlight only icon slot */ [data-page="chat"].sidebar-collapsed .sb-nav-item { background: transparent !important; } [data-page="chat"].sidebar-collapsed .sb-new-chat-btn { background: transparent !important; box-shadow: none !important; /* Container is px-4 (16px); pull back 8px so the 28px icon centers in the 44px rail. */ margin-left: -8px; } /* The .skuo-accent fill is suppressed above, so its light-text-on-accent-fill color (--accent-contrast) would otherwise render as a near-invisible icon on the collapsed rail's plain background. Fall back to the accent color itself, same as every other rail icon. */ [data-page="chat"].sidebar-collapsed .sb-new-chat-btn.skuo-accent .sb-nav-icon, [data-page="chat"].sidebar-collapsed .sb-new-chat-btn.skuo-accent .sb-new-chat-chevron { color: var(--accent-color); } [data-page="chat"].sidebar-collapsed .sb-nav-item:hover .sb-nav-icon, [data-page="chat"].sidebar-collapsed .sb-new-chat-btn:hover .sb-nav-icon { background: var(--sb-item-hover); } .dark [data-page="chat"].sidebar-collapsed .sb-nav-item:hover .sb-nav-icon, .dark [data-page="chat"].sidebar-collapsed .sb-new-chat-btn:hover .sb-nav-icon { background: var(--sb-item-hover); } [data-page="chat"].sidebar-collapsed .sb-profile-btn { background: transparent !important; } [data-page="chat"] .sb-profile-btn .sb-nav-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.12s ease; transform: translateX(10px); } [data-page="chat"].sidebar-collapsed .sb-profile-btn .sb-nav-icon { transform: translateX(0); } [data-page="chat"].sidebar-collapsed .sb-profile-btn:hover .sb-nav-icon { background: var(--sb-item-hover); } .dark [data-page="chat"].sidebar-collapsed .sb-profile-btn:hover .sb-nav-icon { background: var(--sb-item-hover); } /* Hide folder icon (keep chevron) */ [data-page="chat"] #folders-list .opacity-60 { display: none; } [data-page="chat"] .sb-nav-item { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-radius: 10px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; cursor: pointer; transition: background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.15s ease; white-space: nowrap; overflow: hidden; } [data-page="chat"] .sb-nav-item:hover { background: var(--sb-item-hover); } .dark [data-page="chat"] .sb-nav-item:hover { background: var(--sb-item-hover); } /* ── Tile system (New chat / Research / VoidAI) ────────────── Scoped to .sb-tile so the Labs21 wordmark row stays untouched. */ [data-page="chat"] .sb-tile { position: relative; } /* Accent indicator bar — sits at the tile's left edge, shown only on the active tile */ [data-page="chat"] .sb-tile::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; border-radius: 3px; background: var(--accent-color); opacity: 0; transform: translateY(-50%) scaleY(0.35); transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover: a clean rounded fill — plain icons, no box. Excludes the accent New-chat tile: this `background` shorthand would reset the shared .skuo-accent gradient (background-image), leaving pale fill under white text. Its hover comes from .skuo instead. */ [data-page="chat"] .sb-tile:not(.skuo-accent):hover { background: var(--sb-item-hover); } [data-page="chat"] .sb-tile:hover .sb-nav-icon { color: var(--accent-color); } [data-page="chat"] .sb-tile:active .sb-nav-icon { transform: scale(0.9); } /* Bouncy glyphs: scale the inner SVG (not the icon box, which owns the translateX collapse-sync transform) with an overshoot easing so nav icons pop on hover and squish on press. */ [data-page="chat"] .sb-nav-icon svg { transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-page="chat"] .sb-tile:hover .sb-nav-icon svg { transform: scale(1.18); } [data-page="chat"] .sb-tile:active .sb-nav-icon svg { transform: scale(0.88); } /* Research (compass) + VoidAI (zap) icons: shifted right when expanded for balanced padding, then slide seamlessly to the centered rail position (translateX 0 → glyph at 22px = 44/2) when collapsed. Mirrors the profile avatar and is synced to the sidebar width transition (0.3s, same easing). */ [data-page="chat"] .sb-nav-item.sb-tile .sb-nav-icon { transform: translateX(8px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, color 0.2s ease; } [data-page="chat"].sidebar-collapsed .sb-nav-item.sb-tile .sb-nav-icon { transform: translateX(0); } /* Preserve the press feedback while keeping the horizontal offset. */ [data-page="chat"] .sb-nav-item.sb-tile:active .sb-nav-icon { transform: translateX(8px) scale(0.9); } [data-page="chat"].sidebar-collapsed .sb-nav-item.sb-tile:active .sb-nav-icon { transform: translateX(0) scale(0.9); } [data-page="chat"] .sb-nav-item--muted { color: var(--text-secondary); font-size: 13px; font-weight: 450; } [data-page="chat"] .sb-nav-item--muted .sb-nav-icon { color: var(--text-tertiary); } [data-page="chat"] .sb-nav-item--muted:hover { background: var(--sb-active-soft); } .dark [data-page="chat"] .sb-nav-item--muted:hover { background: var(--sb-active-soft); } [data-page="chat"] .sb-nav-item--muted:hover .sb-nav-icon { color: var(--accent-color); } /* External-link affordance — reveals on hover, defers otherwise */ [data-page="chat"] .sb-nav-ext-icon { margin-left: auto; margin-right: 10px; color: var(--text-tertiary); opacity: 0; transform: translateX(-3px); transition: opacity 0.2s ease, transform 0.2s ease; } [data-page="chat"] .sb-nav-item--muted:hover .sb-nav-ext-icon { opacity: 0.9; transform: translateX(0); } [data-page="chat"].sidebar-collapsed .sb-nav-ext-icon { display: none !important; } /* New chat — the primary "active" item: a clean raised card, left bar + chevron */ [data-page="chat"] .sb-new-chat-btn { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); cursor: pointer; white-space: nowrap; border: none; width: 100%; text-align: left; /* Scale from the left edge (where the ::before accent bar is pinned at left:-16px) instead of the box center — center-origin scaling shifts the bar away from the sidebar edge, opening a gap during the hover bounce. */ transform-origin: left center; /* background + box-shadow removed — shared .skuo handles appearance */ transition: background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s ease, margin 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-page="chat"] .sb-new-chat-btn:hover { transform: translateY(-1px) scale(1.015); /* lift + slight pop */ } [data-page="chat"] .sb-new-chat-btn:active { transform: scale(0.96); /* springy squish on press */ } [data-page="chat"] .sb-new-chat-btn .sb-nav-icon { color: var(--accent-color); } [data-page="chat"] .sb-new-chat-btn.skuo-accent, [data-page="chat"] .sb-new-chat-btn.skuo-accent .sb-nav-icon, [data-page="chat"] .sb-new-chat-btn.skuo-accent .sb-new-chat-chevron { color: var(--accent-contrast); } /* Indicator bar pinned on — this is the active item. Pulled to the sidebar's absolute left edge (button is inset 16px by px-4). */ [data-page="chat"] .sb-new-chat-btn::before { opacity: 1; left: -16px; border-radius: 0 3px 3px 0; transform: translateY(-50%) scaleY(1); } /* Chevron affordance on the right, like the reference */ [data-page="chat"] .sb-new-chat-chevron { margin-left: auto; margin-right: 0; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; } /* .sb-new-chat-btn:hover — appearance removed, shared .skuo handles it */ [data-page="chat"] .sb-new-chat-btn:hover .sb-new-chat-chevron { color: var(--text-secondary); transform: translateX(5px); /* springs further with the overshoot easing */ } /* .dark .sb-new-chat-btn / .dark .sb-new-chat-btn:hover — appearance removed, shared .skuo handles it */ /* Expanded: match the Grok reference — no leading icon, just label + chevron. The icon slot is kept for the collapsed rail, where it's the only affordance. */ [data-page="chat"]:not(.sidebar-collapsed) .sb-new-chat-btn { padding: 8px 10px; gap: 8px; } /* Pencil icon only in the collapsed rail; expanded shows label + chevron. */ [data-page="chat"]:not(.sidebar-collapsed) .sb-new-chat-btn .sb-nav-icon { display: none; } /* Rail icon swaps: pencil on a fresh/empty chat, chat bubble once a chat is active. */ [data-page="chat"] .sb-new-chat-btn .nc-icon-active { display: none; } [data-page="chat"]:not(.chat-empty) .sb-new-chat-btn .nc-icon-new { display: none; } [data-page="chat"]:not(.chat-empty) .sb-new-chat-btn .nc-icon-active { display: block; } /* Recents section label */ [data-page="chat"] .sb-section-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); padding: 8px 12px 4px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; } [data-page="chat"] .sb-search-wrap { position: relative; /* 16px sides to match the New chat button's px-4 container. */ margin: 0 16px 8px; } [data-page="chat"] .sb-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 1.3rem; height: 1.3rem; color: var(--text-tertiary); pointer-events: none; transition: color 0.15s ease; } /* Scoped under .sb-search-wrap (specificity 0,2,0) so the left padding beats the global input[type=text] rule (0,1,1) in src/site.css §3 — otherwise the 38px is dropped and the search glyph overlaps the text. */ [data-page="chat"] .sb-search-wrap .sb-search-input { width: 100%; padding: 10px 10px 10px 38px; font-size: 13px; background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: 12px; outline: none; color: var(--text-primary); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } [data-page="chat"] .sb-search-input::placeholder { color: var(--text-tertiary); } [data-page="chat"] .sb-search-input:focus { background: var(--bg-white); border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent); } .dark [data-page="chat"] .sb-search-input { background: var(--bg-white); border-color: var(--border-strong); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .dark [data-page="chat"] .sb-search-input:focus { background: var(--bg-white); border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); } [data-page="chat"] .sb-search-wrap:focus-within .sb-search-icon { color: var(--accent-color); } [data-page="chat"] .sb-profile-btn { display: flex; align-items: center; gap: 0; padding: 6px 0; border-radius: 10px; cursor: pointer; transition: background 0.12s ease; } [data-page="chat"] .sb-profile-btn:hover { background: var(--sb-item-hover); } .dark [data-page="chat"] .sb-profile-btn:hover { background: var(--sb-item-hover); } /* Footer zone: no separator line (removed — looked heavy). Only padding here — margin stays `auto` (Tailwind) to pin it to the bottom. */ [data-page="chat"] #sidebar-bottom-actions { padding-top: 6px; } [data-page="chat"] .sb-mini-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } [data-page="chat"] .sb-mini-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } .dark [data-page="chat"] .sb-mini-btn:hover { background: rgba(255, 255, 255, 0.07); } /* keep .__menu-item for any legacy callers */ [data-page="chat"] .__menu-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; margin: 0.125rem 0.5rem; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; color: var(--action-btn-color); text-decoration: none; } [data-page="chat"] .__menu-item:hover { background-color: rgba(0, 0, 0, 0.04); } .dark [data-page="chat"] .__menu-item:hover { background-color: rgba(255, 255, 255, 0.04); } [data-page="chat"] .__menu-item .icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } [data-page="chat"] kbd { font-size: 0.75rem; padding: 0.1rem 0.3rem; background: rgba(0, 0, 0, 0.05); border-radius: 4px; margin-left: 2px; } .dark [data-page="chat"] kbd { background: rgba(255, 255, 255, 0.1); } [data-page="chat"] .vail-logo-ai { color: var(--accent-color); } [data-page="chat"] .vail-logo-ai.gradient-mode { background: linear-gradient(-45deg, #3b82f6, #22c55e, #a855f7, #ef4444, #3b82f6); background-size: 120% 120%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-page="chat"] .ai-icon-bubble { background-color: var(--accent-color); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent-contrast); } [data-page="chat"] .user-bubble-container { display: flex; flex-direction: column; align-items: flex-end; max-width: 75%; } [data-page="chat"] .user-msg-bubble { background-color: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 0 0 1px var(--shadow-ring); color: var(--text-primary); padding: 0.75rem 1.25rem; max-width: 100%; animation: chat-fadeIn 0.3s ease-out forwards; word-wrap: break-word; overflow-wrap: anywhere; font-weight: 500; } .dark [data-page="chat"] .user-msg-bubble { background-color: var(--bg-elevated); } [data-page="chat"] .user-row { position: relative; margin-bottom: 1rem; display: flex; justify-content: flex-end; } [data-page="chat"] .ai-row { position: relative; margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; } [data-page="chat"] .ai-bubble-container { width: 100%; } [data-page="chat"] .ai-msg-actions { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-top: 10px; margin-left: -6px; } [data-page="chat"] .ai-actions-left, [data-page="chat"] .ai-actions-right { display: flex; align-items: center; gap: 2px; } [data-page="chat"] .ai-action-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #a1a1aa; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; background: transparent; border: none; } [data-page="chat"] .ai-action-btn:hover { background: rgba(0, 0, 0, 0.06); color: #52525b; } .dark [data-page="chat"] .ai-action-btn:hover { background: rgba(255, 255, 255, 0.06); color: #d4d4d8; } [data-page="chat"] .main-response-content { background-color: transparent; color: var(--text-primary); border: none; font-size: 0.95rem; line-height: 1.7; font-weight: 450; } .dark [data-page="chat"] .main-response-content { color: var(--text-primary); } [data-page="chat"] .user-msg-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s ease; padding-top: 4px; justify-content: flex-end; } [data-page="chat"] .user-row:hover .user-msg-actions { opacity: 1; } [data-page="chat"] .msg-timestamp { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; margin: 0 6px; user-select: none; } [data-page="chat"] .user-row:hover .msg-timestamp, [data-page="chat"] .group:hover .msg-timestamp { opacity: 0.5; } [data-page="chat"] .ai-timestamp { opacity: 0.35; margin-left: 8px; } [data-page="chat"] .user-msg-action-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; color: #a1a1aa; cursor: pointer; transition: all 0.15s ease; background: transparent; border: none; } [data-page="chat"] .user-msg-action-btn:hover { color: var(--accent-color); background: rgba(0, 0, 0, 0.05); } .dark [data-page="chat"] .user-msg-action-btn:hover { background: rgba(255, 255, 255, 0.05); } [data-page="chat"] .prose, [data-page="chat"] .prose-target { max-width: 100%; color: inherit; font-size: 0.95rem; line-height: 1.6; font-weight: 500; word-wrap: break-word; overflow-wrap: anywhere; } [data-page="chat"] .prose a, [data-page="chat"] .prose-target a { color: var(--accent-color); text-decoration: none; } @media (min-width: 1024px) { [data-page="chat"] .prose, [data-page="chat"] .prose-target { font-size: 0.9rem; line-height: 1.5; } } [data-page="chat"] .prose pre, [data-page="chat"] .prose-target pre { background-color: var(--surface-dark); color: #faf9f5; padding: 1.25rem; overflow-x: auto; margin: 0; border: none; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; white-space: pre; word-wrap: normal; overflow-wrap: normal; } [data-page="chat"] .prose pre code, [data-page="chat"] .prose-target pre code { white-space: inherit; word-break: normal; } [data-page="chat"] .prose pre::-webkit-scrollbar, [data-page="chat"] .prose-target pre::-webkit-scrollbar { height: 8px; background: transparent; } [data-page="chat"] .prose pre::-webkit-scrollbar-thumb, [data-page="chat"] .prose-target pre::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } [data-page="chat"] .prose pre:hover::-webkit-scrollbar-thumb, [data-page="chat"] .prose-target pre:hover::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); } .dark [data-page="chat"] .prose pre:hover::-webkit-scrollbar-thumb, .dark [data-page="chat"] .prose-target pre:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); } .dark [data-page="chat"] .prose pre, .dark [data-page="chat"] .prose-target pre { color: #faf9f5; background-color: var(--surface-dark); } .dark [data-page="chat"] .prose pre::-webkit-scrollbar-thumb, .dark [data-page="chat"] .prose-target pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } [data-page="chat"] .code-window { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; margin: 1.5rem 0; border: 1px solid var(--border); background: var(--surface-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .dark [data-page="chat"] .code-window { background: var(--surface-dark); border-color: var(--border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } [data-page="chat"] .code-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: var(--deep-dark); border-bottom: 1px solid var(--border); position: sticky; left: 0; right: 0; z-index: 20; font-family: 'Satoshi', sans-serif; /* Flat styles */ } .dark [data-page="chat"] .code-header { background: var(--deep-dark); border-bottom-color: var(--border); } [data-page="chat"] .code-header-left { display: flex; align-items: center; } [data-page="chat"] .language-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: #71717a; font-family: 'Satoshi', sans-serif; } .dark [data-page="chat"] .language-label { color: #a1a1aa; } [data-page="chat"] .code-header-right { display: flex; align-items: center; } [data-page="chat"] .code-copy-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); color: #71717a; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } [data-page="chat"] .code-copy-btn:hover { background: #fff; color: var(--accent-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border-color: var(--accent-color); } .dark [data-page="chat"] .code-copy-btn { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); color: #a1a1aa; } .dark [data-page="chat"] .code-copy-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.2); } [data-page="chat"] .code-copy-btn:active { transform: translateY(0); } [data-page="chat"] .katex-display { margin: 1.5rem 0 !important; padding: 0.75rem; background: rgba(0, 0, 0, 0.02); border-radius: 12px; overflow-x: auto; } [data-page="chat"] .katex-display::-webkit-scrollbar { height: 6px; background: transparent; } [data-page="chat"] .katex-display::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; } .dark [data-page="chat"] .katex-display::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } [data-page="chat"] .history-item-active { /* Raised accent chip — refined surface (matches design system "selected = accent tint"). Whisper accent fill + faint glow. */ background: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-accent), white 7%), color-mix(in srgb, var(--skuo-accent), black 7%)); color: var(--accent-contrast); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.18), 0 2px 10px -4px var(--skuo-glow); border-radius: 8px !important; } [data-page="chat"] .history-item-active::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 3px; background: var(--accent-color); } /* Drop the active chat's left accent bar in the expanded sidebar. */ [data-page="chat"]:not(.sidebar-collapsed) .history-item-active::before { display: none; } [data-page="chat"] .history-item-active>button { color: var(--accent-contrast) !important; } .dark [data-page="chat"] .history-item-active { background: linear-gradient( 180deg, color-mix(in srgb, var(--skuo-accent), white 8%), color-mix(in srgb, var(--skuo-accent), black 8%)); } /* Inactive rows: accent-aware hover across the whole row, not just the label */ [data-page="chat"] .history-btn-container:not(.history-item-active):hover { background: var(--sb-item-hover); } /* ── Drag-to-reorder ─────────────────────────────────────────── */ /* The row being dragged dims so the drop indicator reads as the target. */ [data-page="chat"] .history-btn-container.chat-dragging { opacity: 0.4; } /* 2px accent line shown between rows at the drop slot. */ [data-page="chat"] .chat-drop-indicator { height: 2px; margin: 1px 8px; border-radius: 2px; background: var(--accent-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 35%, transparent); pointer-events: none; } [data-page="chat"] .dropdown-menu { display: none; opacity: 0; z-index: 600; position: absolute; } [data-page="chat"] .dropdown-menu.active { display: block; opacity: 1; } [data-page="chat"] .accent-dot { width: 1.5rem; height: 1.5rem; border-radius: 9999px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; } [data-page="chat"] .accent-dot.active { border-color: currentColor; } [data-page="chat"] .input-box-wrap { background-color: var(--bg-elevated); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-strong); border-radius: 28px; box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.04); position: relative; z-index: 40; overflow: hidden; pointer-events: auto; } [data-page="chat"] .input-box-wrap:focus-within { border-color: color-mix(in srgb, var(--accent-color), transparent 55%); box-shadow: 0 4px 22px -6px rgba(0, 0, 0, 0.12), 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%); } .dark [data-page="chat"] .input-box-wrap { background-color: var(--bg-elevated); border-color: var(--border-strong); box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.5); } .dark [data-page="chat"] .input-box-wrap:focus-within { border-color: color-mix(in srgb, var(--accent-color), transparent 50%); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 88%); outline: none; } [data-page="chat"] .input-box-wrap::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--grad-angle), var(--accent-color), color-mix(in srgb, var(--accent-color), white 20%), color-mix(in srgb, var(--accent-color), black 10%), color-mix(in srgb, var(--accent-color), white 30%), var(--accent-color)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; } [data-page="chat"].is-generating .input-box-wrap { border-color: transparent; background-image: none; box-shadow: 0 0 22px color-mix(in srgb, var(--accent-color), transparent 85%), 0 0 42px color-mix(in srgb, var(--accent-color), transparent 85%); } [data-page="chat"].is-generating .input-box-wrap::before { opacity: 1; animation: rotate-gradient 3s linear infinite; } /* Composer: Claude-style two-row layout — the textarea sits full-width on its own row; controls (+ on the left, mode/send on the right) sit on the row beneath. The field still grows upward as lines are added. */ [data-page="chat"] #input-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 6px; } [data-page="chat"] #input-inner .input-textarea-wrap { order: -1; flex: 1 0 100%; min-width: 0; } [data-page="chat"] #input-actions { margin-left: auto; } /* Field grows/shrinks fluidly as lines are added or removed. */ [data-page="chat"] #user-input { transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1); /* Kill the global input/textarea chrome (border + radius + inset shadow from src/site.css §3) so the field is a bare transparent surface inside the .input-box-wrap capsule — no nested outline. */ border: none; border-radius: 0; box-shadow: none; background: transparent; } [data-page="chat"] #user-input:focus { border: none; box-shadow: none; outline: none; } [data-page="chat"] #input-inner.is-multiline { flex-wrap: wrap; gap: 10px; } [data-page="chat"] #input-inner.is-multiline #input-actions { margin-left: auto; } /* Only the field animates as it moves to its own row; the buttons hold still. */ [data-page="chat"] #input-inner.is-multiline .input-textarea-wrap { order: -1; flex: 1 0 100%; animation: ib-textarea-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="chat"] #input-inner.is-collapsing .input-textarea-wrap { animation: ib-textarea-sink 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes ib-textarea-rise { 0% { opacity: 0.4; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes ib-textarea-sink { 0% { opacity: 0.7; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-page="chat"] #input-inner, [data-page="chat"] #user-input, [data-page="chat"] #input-inner.is-multiline .input-textarea-wrap, [data-page="chat"] #input-inner.is-collapsing .input-textarea-wrap { transition: none; animation: none; } } [data-page="chat"].is-generating .vail-logo-ai, [data-page="chat"].is-generating #active-model-icon, [data-page="chat"].is-generating #active-model-icon svg, [data-page="chat"].is-generating #active-model-icon path, [data-page="chat"].is-generating #active-model-icon circle { animation: none !important; transform: none !important; background-position: 0 0 !important; transition: none !important; } @property --grad-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes rotate-gradient { from { --grad-angle: 0deg; } to { --grad-angle: 360deg; } } /* ── Model generating header ── */ [data-page="chat"] .model-generating-header { display: flex; align-items: center; overflow: hidden; max-height: 30px; margin-bottom: 10px; opacity: 1; transition: max-height 0.4s ease, opacity 0.3s ease, margin-bottom 0.4s ease; } [data-page="chat"] .model-generating-header.done { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; } [data-page="chat"] .model-generating-label { font-size: 12px; font-style: italic; background: linear-gradient(90deg, var(--text-secondary, #aaa) 20%, var(--accent-color) 50%, var(--text-secondary, #aaa) 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gen-text-shimmer 2s linear infinite; } [data-page="chat"] .model-generating-label strong { font-style: normal; font-weight: 600; } @keyframes gen-text-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes border-spin-move { 0% { background-position: 0 0, 0% 0%; } 100% { background-position: 0 0, 300% 0%; } } [data-page="chat"] #bottom-fade { position: absolute; bottom: 0; left: 0; width: 100%; height: 220px; background: var(--fade-gradient-stop); pointer-events: none; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; transition: background 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), top 0.5s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="chat"] .history-btn-container { display: flex; align-items: center; width: 100%; gap: 4px; padding: 0 4px; position: relative; /* same springy motion as .sb-new-chat-btn: overshoot easing so hover pops and a released press bounces back */ transition: background 0.15s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-page="chat"] .history-btn-container:hover { transform: translateY(-1px) scale(1.015); /* lift + slight pop */ } /* Squish only while the pointer is held down — releasing springs back. */ [data-page="chat"] .history-btn-container:active { transform: scale(0.96); } /* Bouncy pop-in for a chat that just appeared in the sidebar. renderHistory() adds this only to ids it hasn't rendered before, so re-renders (saves, reorders) don't replay it on the whole list. */ [data-page="chat"] .history-btn-container.chat-item-in { /* backwards (not both): a forwards fill would keep overriding transform after the animation ends, blocking the hover lift */ animation: chat-item-bounce-in 0.55s ease backwards; } @keyframes chat-item-bounce-in { 0% { opacity: 0; transform: scale(0.55) translateY(-10px); } 55% { opacity: 1; transform: scale(1.06) translateY(3px); } 78% { transform: scale(0.97) translateY(-1px); } 100% { transform: scale(1) translateY(0); } } /* Springy pop on the chat that just became active. loadChat() rebuilds the list synchronously, so the clicked row can't animate itself — renderHistory() tags the newly-active id after the re-render instead. */ [data-page="chat"] .history-btn-container.chat-item-selected { animation: chat-item-select-pop 0.4s ease backwards; } @keyframes chat-item-select-pop { 0% { transform: scale(0.94); } 50% { transform: scale(1.04); } 75% { transform: scale(0.985); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { [data-page="chat"] .history-btn-container.chat-item-in, [data-page="chat"] .history-btn-container.chat-item-selected, [data-page="chat"] .history-btn-container:hover, [data-page="chat"] .history-btn-container:active { animation: none; transform: none; } } [data-page="chat"] .history-action-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; font-size: 11px; opacity: 0.6; transition: opacity 0.2s ease; } [data-page="chat"] .history-btn-container:hover .history-action-btn { opacity: 0.8; } [data-page="chat"] .history-action-btn:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.05); } .dark [data-page="chat"] .history-action-btn:hover { background: rgba(255, 255, 255, 0.05); } [data-page="chat"] .history-action-btn.pinned-active { opacity: 1; color: var(--accent-color); } [data-page="chat"] .history-section-header { font-size: 9px; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem 0.75rem 0.25rem; } [data-page="chat"] .thinking-container { display: flex; align-items: center; height: 1.75rem; user-select: none; box-sizing: border-box; } [data-page="chat"] .ai-model-logo { width: 26px; height: 26px; color: var(--accent-color); margin-top: 12px; } [data-page="chat"] .ai-model-logo svg { width: 100%; height: 100%; } [data-page="chat"] .ai-model-logo.spinning svg { animation: logoSpin 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } @keyframes logoSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Book page-flip animation (generation indicator) ── */ [data-page="chat"] .book-flip-lane { position: relative; width: 100%; height: 28px; margin-top: 8px; } [data-page="chat"] .book-flip-lane { transition: opacity 0.3s ease; } [data-page="chat"] .book-flip-lane.done { opacity: 0; } [data-page="chat"] .book-flipper { position: absolute; left: 2px; top: calc(50% - 13px); width: 26px; height: 26px; color: var(--accent-color); opacity: 0.85; animation: chat-book-bob 2.6s ease-in-out infinite; } [data-page="chat"] .book-flipper svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8px; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* The turning leaf — flips around the spine (x=12 in the 24×24 viewBox), fades out once it lands on the left, then reappears on the right as the next page. */ [data-page="chat"] .book-flipper .book-page { transform-box: view-box; transform-origin: 12px 12px; animation: book-page-flip 1.5s ease-in-out infinite; } @keyframes book-page-flip { 0% { transform: scaleX(1); opacity: 1; } 48% { transform: scaleX(-1); opacity: 1; } 60% { transform: scaleX(-1); opacity: 0; } 61% { transform: scaleX(1); opacity: 0; } 76%, 100% { transform: scaleX(1); opacity: 1; } } @keyframes chat-book-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } [data-page="chat"] .thinking-shimmer { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; background: linear-gradient(90deg, var(--action-btn-color) 0%, var(--accent-color) 40%, color-mix(in srgb, var(--accent-color), white 40%) 50%, var(--accent-color) 60%, var(--action-btn-color) 100%); background-size: 250% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: chat-thinking-shimmer 1.2s ease-in-out infinite; } [data-page="chat"] .thought-container { margin-bottom: 1rem; margin-top: 0.5rem; padding-left: 12px; border-left: 2px solid var(--border-strong); background-color: transparent; padding-top: 0.5rem; padding-bottom: 0.5rem; } .dark [data-page="chat"] .thought-container { border-left-color: var(--border-strong); } [data-page="chat"] .thought-header { width: 100%; background: transparent; border: none; padding: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 6px; user-select: none; cursor: pointer; transition: color 0.2s; text-align: left; } [data-page="chat"] .thought-header:hover { color: var(--text-tertiary); } html.dark [data-page="chat"] .thought-header { color: var(--text-tertiary); } html.dark [data-page="chat"] .thought-header:hover { color: var(--text-secondary); } [data-page="chat"] .thought-content { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 0.9rem; line-height: 1.6; color: var(--text-tertiary); display: none; } [data-page="chat"] .thought-content.expanded { display: block; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } html.dark [data-page="chat"] .thought-content { color: var(--text-tertiary); } [data-page="chat"] .thinking-text-gradient, .dark [data-page="chat"] .thinking-text-gradient { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 0.875rem; font-weight: 600; background: linear-gradient(90deg, var(--thinking-side) 25%, var(--thinking-accent) 50%, var(--thinking-side) 75%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: chat-thinking-shimmer 2s infinite linear; } @keyframes chat-thinking-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-page="chat"] #onboarding-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: flex; flex-direction: column; animation: chat-fadeIn 0.4s ease-out; overflow: hidden; } .dark [data-page="chat"] #onboarding-overlay { background: var(--bg); } [data-page="chat"] #onboarding-overlay.hidden { display: none !important; } @media (min-width: 768px) { [data-page="chat"] #onboarding-overlay { flex-direction: row; } } [data-page="chat"] #onboarding-side-img { display: none; } @media (min-width: 768px) { [data-page="chat"] #onboarding-side-img { display: block; flex: 1; min-width: 0; object-fit: cover; height: 100%; order: 2; } } [data-page="chat"] .onboarding-card { width: 100%; padding: 2rem 1.5rem; position: relative; z-index: 2100; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-y: auto; flex: 1; box-sizing: border-box; } @media (min-width: 768px) { [data-page="chat"] .onboarding-card { flex: 1; max-width: 50%; padding: 3rem 2.5rem; order: 1; } } [data-page="chat"] .onboarding-inner { width: 100%; max-width: 380px; } [data-page="chat"] #onboarding-pfp-preview { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--accent-color) 10%, #f4f4f5); border: 2px dashed color-mix(in srgb, var(--accent-color) 40%, #e4e4e7); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .dark [data-page="chat"] #onboarding-pfp-preview { background: color-mix(in srgb, var(--accent-color) 10%, #1e1e1e); border-color: color-mix(in srgb, var(--accent-color) 30%, #27272a); } /* ── Memory encoding card ──────────────────────────────────── */ /* ── Memory pending entry (inline in memories tab) ─────────── */ [data-page="chat"] .mpc-pending-entry { animation: mpc-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes mpc-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } [data-page="chat"] .mpc-bar { height: 2px; background: rgba(167, 139, 250, 0.1); border-radius: 2px; overflow: hidden; position: relative; } [data-page="chat"] .mpc-bar::after { content: ''; position: absolute; left: -60%; top: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.7), transparent); animation: mpc-scan 1.3s ease-in-out infinite; } @keyframes mpc-scan { 0% { left: -60% } 100% { left: 110% } } [data-page="chat"] .mpc-spinner-inline { display: inline-block; width: 10px; height: 10px; border: 1.5px solid rgba(167, 139, 250, 0.2); border-top-color: #a78bfa; border-radius: 50%; animation: mpc-spin 0.65s linear infinite; vertical-align: middle; flex-shrink: 0; } @keyframes mpc-spin { to { transform: rotate(360deg); } } [data-page="chat"] .mpc-label-inline { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; color: #a78bfa; } [data-page="chat"] .mpc-cursor { display: inline-block; width: 2px; height: 12px; background: #a78bfa; margin-left: 1px; vertical-align: text-bottom; border-radius: 1px; animation: mpc-blink 0.75s steps(1) infinite; } @keyframes mpc-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } } /* ── Memory consent card (above input bar) ─────────────────── */ [data-page="chat"] .mem-consent-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--input-bg, #f4f4f5); border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent); animation: mem-consent-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; } .dark [data-page="chat"] .mem-consent-card { background: #27272a; } @keyframes mem-consent-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes mem-consent-out { from { opacity: 1; transform: translateY(0); max-height: 60px; margin-bottom: 0; } to { opacity: 0; transform: translateY(4px); max-height: 0; margin-bottom: -8px; } } [data-page="chat"] .mem-consent-card.dismissing { animation: mem-consent-out 0.18s ease-in forwards; } [data-page="chat"] .mem-consent-label { font-size: 13px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } [data-page="chat"] .mem-consent-label strong { color: #18181b; font-weight: 600; } .dark [data-page="chat"] .mem-consent-label strong { color: #f4f4f5; } [data-page="chat"] .mem-consent-btns { display: flex; gap: 6px; flex-shrink: 0; } [data-page="chat"] .mem-consent-save { padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; /* color/background/border appearance removed — shared .skuo.skuo-accent handles it */ } [data-page="chat"] .mem-consent-dismiss { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; /* color/background/border appearance removed — shared .skuo.skuo-neutral handles it */ } [data-page="chat"] .mpc-check-inline { width: 13px; height: 13px; border-radius: 50%; background: #22c55e; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; } [data-page="chat"] .hallucination-disclaimer { font-size: 0.75rem; color: #71717a; opacity: 0.7; font-weight: 500; font-family: Century, 'Century Schoolbook', Georgia, serif; font-style: italic; } .dark [data-page="chat"] .hallucination-disclaimer { color: #94a3b8; opacity: 0.6; } [data-page="chat"] .prose ol { list-style-type: decimal; padding-left: 1.5rem; } [data-page="chat"] .prose strong { font-weight: 700; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .dark [data-page="chat"] #onboarding-pfp-preview { background: var(--bg-elevated); border-color: var(--border); } [data-page="chat"] #user-profile-section { padding: 0.875rem 0.5rem; border-top: 1px solid rgba(0, 0, 0, 0.05); margin-top: 0.4rem; } .dark [data-page="chat"] #user-profile-section { border-top-color: rgba(255, 255, 255, 0.05); } [data-page="chat"] #user-avatar-display { width: 32px; height: 32px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: var(--accent-color); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; } [data-page="chat"] #settings-sidebar-pfp-card { width: 48px; height: 48px; aspect-ratio: 1/1; flex-shrink: 0; border-radius: 50%; } [data-page="chat"] #pfp-workspace { width: 100px !important; height: 100px !important; aspect-ratio: 1/1; flex-shrink: 0; background: #000; border-radius: 50%; position: relative; overflow: hidden; touch-action: none; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0); background-size: 20px 20px; cursor: move; } [data-page="chat"] #changelog-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(15, 15, 15, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 1rem; } [data-page="chat"] #changelog-modal.active { display: flex; } [data-page="chat"] .changelog-card { width: 100%; max-width: 480px; background-color: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .dark [data-page="chat"] .changelog-card { background-color: var(--bg-elevated); border-color: var(--border); } @media (max-width: 767px) { [data-page="chat"] #personality-modal { padding: 0 !important; } [data-page="chat"] #personality-modal .changelog-card { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; border: none !important; margin: 0 !important; display: flex; flex-direction: column; } [data-page="chat"] #personality-modal .changelog-card>div { height: 100%; display: flex; flex-direction: column; padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 1.5rem !important; overflow-y: auto; } } [data-page="chat"] #settings-overlay { position: fixed; inset: 0; z-index: 2990; background: rgba(20, 20, 19, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: none; opacity: 0; transition: opacity 0.25s ease; } [data-page="chat"] #settings-overlay.active { display: block; opacity: 1; } [data-page="chat"] #settings-panel { position: fixed; z-index: 3000; display: none; flex-direction: column; opacity: 0; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); inset: 0; border-radius: 0; background-color: var(--bg-elevated); border: 1px solid var(--border); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; overflow: hidden; } .dark [data-page="chat"] #settings-panel { background-color: var(--bg-elevated); } [data-page="chat"] #settings-panel.active { display: flex; opacity: 1; } @media (min-width: 768px) { [data-page="chat"] #settings-panel { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); width: min(92vw, 560px); max-height: 88vh; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; overflow: hidden; } .dark [data-page="chat"] #settings-panel { box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; } [data-page="chat"] #settings-panel.active { transform: translate(-50%, -50%) scale(1); } } [data-page="chat"] #settings-content-area { flex: 1; overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom, 0) 0; } [data-page="chat"] .Cadance-tab-bar { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.04); border-radius: 14px; margin: 0 1.25rem 1.5rem; } .dark [data-page="chat"] .Cadance-tab-bar { background: rgba(255, 255, 255, 0.06); } [data-page="chat"] .Cadance-tab-btn { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; /* border + background appearance removed — shared .skuo handles it */ } .dark [data-page="chat"] .Cadance-tab-btn { color: var(--text-secondary); } /* Active tab gets accent fill via shared .skuo-accent behaviour */ [data-page="chat"] .Cadance-tab-btn.active { color: var(--accent-contrast, #fff); } [data-page="chat"] .Cadance-section { padding: 0 1.25rem; margin-bottom: 1.75rem; } [data-page="chat"] .settings-tab-content>.Cadance-section:first-child { padding-top: 1.25rem; } [data-page="chat"] .Cadance-section-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12px; color: var(--text-tertiary); margin-bottom: 10px; padding-left: 4px; } [data-page="chat"] .Cadance-card { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; overflow: hidden; backdrop-filter: blur(8px); } .dark [data-page="chat"] .Cadance-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); } [data-page="chat"] .Cadance-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; min-height: 52px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); gap: 12px; } .dark [data-page="chat"] .Cadance-row { border-bottom-color: rgba(255, 255, 255, 0.05); } [data-page="chat"] .Cadance-row:last-child { border-bottom: none; } [data-page="chat"] .Cadance-row-label { font-size: 14px; font-weight: 500; color: var(--text-primary); flex-shrink: 0; } .dark [data-page="chat"] .Cadance-row-label { color: var(--text-primary); } [data-page="chat"] .Cadance-theme-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 68px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 1px solid transparent; cursor: pointer; transition: background 0.15s ease; width: 100%; background: transparent; text-align: left; } .dark [data-page="chat"] .Cadance-theme-item { border-bottom-color: rgba(255, 255, 255, 0.05); } [data-page="chat"] .Cadance-theme-item:last-child { border-bottom: none; } [data-page="chat"] .Cadance-theme-item:hover { background: rgba(0, 0, 0, 0.03); } .dark [data-page="chat"] .Cadance-theme-item:hover { background: rgba(255, 255, 255, 0.04); } [data-page="chat"] .Cadance-theme-item.active-theme { background: color-mix(in srgb, var(--accent-color) 8%, transparent); position: relative; } [data-page="chat"] .Cadance-theme-item.active-theme::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: var(--accent-color); border-radius: 0 4px 4px 0; box-shadow: 0 0 10px var(--accent-glow); } [data-page="chat"] .Cadance-theme-icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; transition: box-shadow 0.3s ease; } [data-page="chat"] .Cadance-theme-icon.glow-active { box-shadow: 0 0 0 3px var(--accent-color), 0 0 20px var(--accent-glow); } [data-page="chat"] .Cadance-theme-check { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-color); display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; box-shadow: 0 0 8px var(--accent-glow); } [data-page="chat"] .apple-section-title { display: none; } [data-page="chat"] .apple-list-group { display: none; } [data-page="chat"] .apple-list-item { display: none; } [data-page="chat"] .apple-nav-item { display: none; } [data-page="chat"] .apple-profile-card { display: none; } [data-page="chat"] .apple-icon-box { display: none; } [data-page="chat"] .settings-nav-item { display: none; } [data-page="chat"] #settings-sidebar { display: none !important; } [data-page="chat"] #sidebar-hover-trigger { position: fixed; top: 0; left: 0; bottom: 0; width: 30px; z-index: 2400; display: none; } [data-page="chat"] #pfp-workspace { width: 100%; aspect-ratio: 1; background: #000; border-radius: 0.75rem; position: relative; overflow: hidden; touch-action: none; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0); background-size: 20px 20px; cursor: move; } [data-page="chat"] #pfp-movable-img { position: absolute; max-width: none; pointer-events: none; user-select: none; transition: none; height: 280px; width: auto; left: 50%; top: 50%; } [data-page="chat"] #pfp-mask { position: absolute; inset: 0; border: 3px solid var(--accent-color); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5); } [data-page="chat"] button, [data-page="chat"] a { touch-action: manipulation; } [data-page="chat"] #sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); z-index: 450; display: none; opacity: 0; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="chat"] #sidebar-overlay.sidebar-overlay-visible { opacity: 1; } .dark [data-page="chat"] #sidebar-overlay { background: rgba(0, 0, 0, 0.6); } [data-page="chat"].onboarding-active #sidebar { display: none !important; } [data-page="chat"] .tutorial-step { display: none; } [data-page="chat"] .tutorial-step.active { display: block; animation: chat-fadeIn 0.3s ease-out; } [data-page="chat"] .lang-btn { position: absolute; top: 1rem; right: 1.5rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0, 0, 0, 0.05); color: #a1a1aa; transition: all 0.2s ease; } .dark [data-page="chat"] .lang-btn { background: rgba(255, 255, 255, 0.05); } [data-page="chat"] .lang-btn:hover { background: var(--accent-color); color: var(--accent-contrast); } /* .chat-capsule — the .ov-nav__bar surface recipe as a reusable class for chat's floating chrome (title bar, mobile sidebar button). Replaced the old .header-island (2026-07-04). */ [data-page="chat"] .chat-capsule { border-radius: 999px; background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated), white 7%), color-mix(in srgb, var(--bg-elevated), black 7%)); border: 1px solid color-mix(in srgb, var(--bg-elevated), black 14%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 6px 22px -8px rgba(0, 0, 0, 0.18); } .dark [data-page="chat"] .chat-capsule { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated), white 8%), color-mix(in srgb, var(--bg-elevated), black 8%)); border-color: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px -8px rgba(0, 0, 0, 0.55); } [data-page="chat"] #top-right-actions { position: fixed; top: 1rem; right: 1rem; align-items: center; gap: 0.5rem; z-index: 1000; pointer-events: auto; } /* floating action capsule — metrics match the left title capsule (#top-left-chat-title): 2.1rem round controls, 0.3rem padding, 0.1rem gaps → both bars read ~2.7rem tall */ [data-page="chat"] #top-right-actions .ov-nav__bar { gap: 0.1rem; padding: 0.3rem; /* springy pop on hover; no background transition so theme toggles are instant */ transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } [data-page="chat"] #top-right-actions:hover .ov-nav__bar { transform: scale(1.04); } [data-page="chat"] #tra-actions { gap: 0.1rem; transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* when collapsed the empty group would leave a double gap between the chevron and the theme toggle — pull it back by one gap so the spacing looks normal */ [data-page="chat"] #tra-bar.collapsed #tra-actions { margin-left: -0.1rem; } /* every control is the SAME round size; glyph centered with equal padding all around (so horizontal == vertical padding and it fits the full-circle radius) */ [data-page="chat"] #top-right-actions .ov-nav__chevron, [data-page="chat"] #top-right-actions .ov-nav__theme, [data-page="chat"] #tra-actions > button, [data-page="chat"] #tra-actions > #cloud-sync-indicator { width: 2.1rem; height: 2.1rem; flex: none; /* stay square — never shrink horizontally */ padding: 0; /* size is fixed; flex centers the glyph */ border-radius: 9999px; } /* one glyph size across the chevron, action icons, and the theme toggle */ [data-page="chat"] #top-right-actions .ov-nav__chevron svg, [data-page="chat"] #top-right-actions .ov-nav__theme svg, [data-page="chat"] #tra-actions svg, [data-page="chat"] .tra-lang-ico { width: 1.05rem; height: 1.05rem; } /* left chat-title capsule — same .chat-capsule surface as the right-side floating capsule, but compact: the title text leads, small round action buttons trail. No whole-bar hover pop (it's a reading surface, not a control cluster). Transition owns opacity (JS toggles opacity-0/opacity-100 to show/hide the title). */ [data-page="chat"] #top-left-chat-title { gap: 0.1rem; padding: 0.3rem; transition: opacity 0.3s ease, box-shadow 0.4s ease; } [data-page="chat"] #top-left-chat-title #chat-title-text { padding-left: 0.8rem; margin-right: 0.3rem; } [data-page="chat"] #top-left-chat-title button { width: 2.1rem; height: 2.1rem; flex: none; padding: 0; border-radius: 9999px; } [data-page="chat"] #top-left-chat-title svg { width: 1rem; height: 1rem; } /* mobile sidebar-open button — standalone round capsule, same height as the title bar beside it (2.1rem control + 2×0.3rem padding = 2.7rem) */ [data-page="chat"] #menu-toggle-btn { width: 2.7rem; height: 2.7rem; } [data-page="chat"] #menu-toggle-btn svg { width: 1.15rem; height: 1.15rem; } /* keep the title-regen shimmer visible on top of the capsule fill: .shimmer-active alone loses to this id rule, so layer the sweep over the capsule gradient here */ [data-page="chat"] #top-left-chat-title.shimmer-active { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color), white 40%), transparent), linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated), white 7%), color-mix(in srgb, var(--bg-elevated), black 7%)); background-size: 200% 100%, 100% 100%; animation: shimmer-btn 1.5s infinite; } .dark [data-page="chat"] #top-left-chat-title.shimmer-active { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color), transparent 80%), transparent), linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated), white 8%), color-mix(in srgb, var(--bg-elevated), black 8%)); background-size: 200% 100%, 100% 100%; animation: shimmer-btn 1.5s infinite; } /* one-shot accent text-shimmer on the sidebar row whose title was just (re)generated — same gradient-text idiom as .model-generating-label; the class is removed on animationend so the text returns to normal */ [data-page="chat"] .title-shimmer { background: linear-gradient(90deg, var(--text-secondary, #aaa) 20%, var(--accent-color) 50%, var(--text-secondary, #aaa) 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gen-text-shimmer 1.2s linear 2; } @media (max-width: 1023px) { [data-page="chat"] #top-right-actions { top: 0.75rem; right: 1rem; } [data-page="chat"] .action-label { display: none; } } [data-page="chat"] #research-page-overlay { position: fixed; inset: 0; z-index: 3500; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); display: none; flex-direction: column; animation: chat-fadeIn 0.4s ease-out; } .dark [data-page="chat"] #research-page-overlay { background: rgba(13, 13, 13, 0.8); } [data-page="chat"] #research-page-overlay.active { display: flex; } [data-page="chat"] #welcome-logo-container { width: 64px; height: 64px; margin-bottom: 24px; color: var(--accent-color); display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="chat"] #welcome-logo-container svg { width: 100%; height: 100%; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* --- Flat Styles --- */ /* .skuomorphic-btn appearance removed — shared .skuo alias in src/site.css §3 handles it */ /* #send-btn appearance removed — shared .skuo.skuo-accent handles it; layout via Tailwind on the element */ [data-page="chat"] .skuomorphic-toast { position: relative; background: #22c55e; border: 1px solid rgba(0, 0, 0, 0.1); color: white; border-radius: 14px; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } [data-page="chat"] .skuomorphic-menu-active { position: relative; background: rgba(0, 0, 0, 0.03) !important; color: var(--accent-color) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; } .dark [data-page="chat"] .skuomorphic-menu-active { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--border) !important; } /* Folder Styles */ [data-page="chat"] .folder-container { margin-bottom: 0.25rem; } [data-page="chat"] .folder-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; user-select: none; color: #71717a; position: relative; } [data-page="chat"] .folder-header:hover { background: rgba(0, 0, 0, 0.03); color: #18181b; } .dark [data-page="chat"] .folder-header:hover { background: rgba(255, 255, 255, 0.03); color: #f4f4f5; } [data-page="chat"] .folder-icon { transition: transform 0.2s ease; } [data-page="chat"] .folder-header.is-open .folder-icon { transform: rotate(90deg); } [data-page="chat"] .folder-content { display: none; padding-left: 0.5rem; margin-top: 0.125rem; } [data-page="chat"] .folder-header.is-open+.folder-content { display: block; } [data-page="chat"] .folder-header.drag-over { background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important; outline: 2px dashed var(--accent-color); } @keyframes popover-fade { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } [data-page="chat"] .folder-action-btn { opacity: 0; transition: opacity 0.2s ease; padding: 2px; border-radius: 9999px; } [data-page="chat"] .folder-header:hover .folder-action-btn { opacity: 1; } /* Removed .big-drop-zone styles */ [data-page="chat"] #recents-scroll-area.drag-over { background: color-mix(in srgb, var(--accent-color) 8%, transparent); box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent-color) 5%, transparent); } .dark [data-page="chat"] #recents-scroll-area.drag-over, .dark [data-page="chat"] #sidebar-bottom-actions.drag-over { background: color-mix(in srgb, var(--accent-color) 12%, transparent); } [data-page="chat"] #sidebar-bottom-actions.drag-over { background: color-mix(in srgb, var(--accent-color) 8%, transparent); } /* Chat Action Menu Styles */ [data-page="chat"] .chat-action-menu { position: fixed; z-index: 3000; min-width: 160px; background: var(--bg-elevated-secondary); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3), inset 0 1px 1.5px rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(0, 0, 0, 0.02); padding: 0.5rem; opacity: 0; pointer-events: none; transform: scale(0.95) translateY(-5px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .dark [data-page="chat"] .chat-action-menu { background: var(--bg-elevated); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1.5px 3px rgba(0, 0, 0, 0.3); } [data-page="chat"] .chat-action-menu.is-active { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } /* Custom Modal Styles */ [data-page="chat"] .custom-modal-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(20, 20, 19, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 1.5rem; pointer-events: none; } [data-page="chat"] .custom-modal-overlay.is-active { opacity: 1; pointer-events: auto; } [data-page="chat"] .custom-modal-card { background-color: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 420px; padding: 2.25rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; transform: scale(0.92) translateY(30px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .dark [data-page="chat"] .custom-modal-card { background-color: var(--bg-elevated); border-color: var(--border); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 24px; } [data-page="chat"] .custom-modal-overlay.is-active .custom-modal-card { transform: scale(1) translateY(0); } [data-page="chat"] .custom-modal-title { font-size: 1.35rem; font-weight: 900; margin-bottom: 0.85rem; color: var(--accent-color); letter-spacing: -0.025em; } [data-page="chat"] .custom-modal-message { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.75rem; line-height: 1.6; } .dark [data-page="chat"] .custom-modal-message { color: var(--text-secondary); } [data-page="chat"] .custom-modal-input { width: 100%; padding: 1.15rem 1.4rem; border-radius: 8px; background-color: var(--bg); border: 1px solid var(--border-strong); color: var(--text-primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); outline: none; font-size: 1rem; margin-bottom: 1.75rem; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .dark [data-page="chat"] .custom-modal-input { background-color: var(--bg); border-color: var(--border-strong); color: var(--text-primary); } [data-page="chat"] .custom-modal-input:focus { outline: 2px solid #3898ec; outline-offset: 1px; border-color: #3898ec; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } .dark [data-page="chat"] .custom-modal-input:focus { outline: 2px solid #3898ec; outline-offset: 1px; border-color: #3898ec; } [data-page="chat"] .custom-modal-actions { display: flex; gap: 1rem; justify-content: flex-end; } [data-page="chat"] .modal-btn { padding: 0.85rem 1.85rem; border-radius: 14px; font-size: 0.95rem; font-weight: 700; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; border: 1px solid transparent; } /* .modal-btn-cancel appearance removed — shared .skuo.skuo-neutral handles it */ /* .modal-btn-confirm appearance removed — shared .skuo.skuo-accent handles it */ [data-page="chat"] .modal-btn-danger { background: #ef4444; color: white; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 20px -5px rgba(239, 68, 68, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.3); } [data-page="chat"] .modal-btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -5px rgba(239, 68, 68, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4); } [data-page="chat"] .chat-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--action-btn-color); transition: all 0.2s ease; cursor: pointer; } [data-page="chat"] .chat-menu-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--accent-color); } .dark [data-page="chat"] .chat-menu-item:hover { background: rgba(255, 255, 255, 0.05); } [data-page="chat"] .chat-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } [data-page="chat"] .chat-menu-item i { width: 14px; height: 14px; } [data-page="chat"] .section-header-row { display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; margin-top: 1rem; margin-bottom: 0.5rem; } [data-page="chat"] .section-header-text { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12px; color: var(--text-tertiary); } [data-page="chat"] #voice-overlay { position: fixed; inset: 0; z-index: 9000; display: none; background: #000; flex-direction: row; } [data-page="chat"] #voice-overlay.active { display: flex; } [data-page="chat"] #voice-rail { width: 60px; flex: none; background: #000; border-right: 1px solid #141416; display: flex; flex-direction: column; align-items: center; padding-top: 14px; gap: 6px; } [data-page="chat"] #voice-rail-logo { width: 30px; height: 30px; border-radius: 9999px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-color), white 40%), var(--accent-color) 60%, color-mix(in srgb, var(--accent-color), black 25%) 100%); box-shadow: 0 0 14px color-mix(in srgb, var(--accent-color), transparent 45%); } [data-page="chat"] #voice-rail-label { color: #8a8a8f; font-size: 10px; font-weight: 600; } [data-page="chat"] #voice-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; position: relative; } [data-page="chat"] #voice-orb { position: relative; overflow: hidden; width: 150px; height: 150px; border-radius: 9999px; box-shadow: 0 0 60px color-mix(in srgb, var(--accent-color), transparent 42%), inset 0 0 28px color-mix(in srgb, var(--accent-color), black 30%); animation: voice-pulse 4.5s ease-in-out infinite; cursor: pointer; transition: box-shadow .45s ease; } [data-page="chat"] #voice-orb .orb-svg { width: 100%; height: 100%; display: block; } /* Cloud gradient is fully accent-driven: light top → accent → deep accent bottom */ [data-page="chat"] #voice-orb .orb-s0 { stop-color: color-mix(in srgb, var(--accent-color), white 80%); } [data-page="chat"] #voice-orb .orb-s1 { stop-color: color-mix(in srgb, var(--accent-color), white 30%); } [data-page="chat"] #voice-orb .orb-s2 { stop-color: var(--accent-color); } [data-page="chat"] #voice-orb .orb-s3 { stop-color: color-mix(in srgb, var(--accent-color), black 26%); } [data-page="chat"] #voice-overlay.speaking #voice-orb { animation: voice-pulse 1.8s ease-in-out infinite; box-shadow: 0 0 92px color-mix(in srgb, var(--accent-color), transparent 22%), inset 0 0 28px color-mix(in srgb, var(--accent-color), black 30%); } @keyframes voice-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} } @media (prefers-reduced-motion: reduce) { [data-page="chat"] #voice-orb, [data-page="chat"] #voice-overlay.speaking #voice-orb { animation: none; } } [data-page="chat"] #voice-state { color: #ececec; font-size: 19px; font-weight: 600; } [data-page="chat"] #voice-transcript { color: #9a9aa0; font-size: 14px; max-width: 70%; text-align: center; min-height: 20px; line-height: 1.5; } [data-page="chat"] #voice-controls { position: absolute; bottom: 34px; display: flex; gap: 18px; } [data-page="chat"] .voice-ctrl { width: 54px; height: 54px; border-radius: 9999px; background: #1c1c20; color: #dcdce0; display: flex; align-items: center; justify-content: center; border: 1px solid #2c2c31; cursor: pointer; } [data-page="chat"] .voice-ctrl.end { background: #3a1116; color: #ff6b6b; border-color: #52181d; } [data-page="chat"] .voice-ctrl.muted { color: #ff6b6b; } /* ── Chrome override blocks removed ── All chat-specific buttons now use shared .skuo / .skuo-accent / .skuo-neutral / .skuo-icon classes from src/site.css §3. No per-page --chrome-* wiring needed. */ /* Sidebar collapse overrides for large screens When the body has the `sidebar-collapsed` class we want the aside to visually shrink to a narrow rail and show the mini content while hiding the full content. Use !important to override the inline `width: var(--sidebar-width)` on the aside element. */ /* APP PRELOADER STYLES */ [data-page="chat"] #app-preloader { position: fixed; inset: 0; background: var(--bg); z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s; } [data-page="chat"] .loader-hub { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } [data-page="chat"] .loader-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: app-spin 1s linear infinite; } [data-page="chat"] .loader-track { fill: none; stroke: rgba(255, 255, 255, 0.03); stroke-width: 6; } [data-page="chat"] .loader-arc { fill: none; stroke: var(--accent-color); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 282; /* 2 * PI * 45 */ stroke-dashoffset: 210; /* Show ~1/4 circle */ filter: drop-shadow(0 0 12px var(--accent-color)); } @keyframes app-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [data-page="chat"] #app-preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ PAGE: chat (canvas-layout.css) — scoped to [data-page="chat"] ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { [data-page="chat"].canvas-open #canvas-container { display: flex !important; flex: 7 1 0% !important; max-width: 70% !important; width: auto !important; } [data-page="chat"].canvas-open main { flex: 3 1 0% !important; max-width: 30% !important; width: auto !important; } } /* Hide personality and updates button when canvas is enabled */ [data-page="chat"].canvas-open #top-right-actions { display: none !important; } /* Ensure proper left/right padding for chat elements in canvas mode */ [data-page="chat"].canvas-open main #chat-messages, [data-page="chat"].canvas-open main div.max-w-2xl { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Ensure top left chat title fits perfectly inside main in canvas mode */ [data-page="chat"].canvas-open #top-left-chat-title { max-width: calc(100% - 3rem) !important; left: 1.5rem !important; } /* Premium Gemini-style canvas card */ [data-page="chat"] .canvas-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.8rem 0; padding: 0.85rem 1.15rem; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.03); color: var(--text-primary); cursor: pointer; text-align: left; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); max-width: 520px; width: 100%; font-family: inherit; } .dark [data-page="chat"] .canvas-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } [data-page="chat"] .canvas-pill:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .dark [data-page="chat"] .canvas-pill:hover { background: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } [data-page="chat"] .canvas-pill:active { transform: translateY(0); } [data-page="chat"] .canvas-pill-left-content { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } [data-page="chat"] .canvas-pill .canvas-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(0, 0, 0, 0.05); color: var(--text-primary); flex: 0 0 38px; transition: background 0.2s ease; } .dark [data-page="chat"] .canvas-pill .canvas-pill-icon { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); } [data-page="chat"] .canvas-pill .canvas-pill-icon svg { stroke: currentColor; width: 18px; height: 18px; } [data-page="chat"] .canvas-pill .canvas-pill-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } [data-page="chat"] .canvas-pill .canvas-pill-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-page="chat"] .canvas-pill .canvas-pill-sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; } [data-page="chat"] .canvas-pill .canvas-pill-open-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 1.25rem; border-radius: 9999px; background: var(--accent-color); color: var(--accent-contrast); font-size: 0.85rem; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 2px 6px -1px var(--accent-glow); flex-shrink: 0; } [data-page="chat"] .canvas-pill:hover .canvas-pill-open-btn { filter: brightness(1.06); transform: scale(1.02); } [data-page="chat"] .canvas-pill:active .canvas-pill-open-btn { filter: brightness(0.96); transform: scale(0.98); } [data-page="chat"] .canvas-pill.generating .canvas-pill-sub::after { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 6px; animation: canvasPillPulse 1.1s ease-in-out infinite; vertical-align: middle; } @keyframes canvasPillPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ═══════════════════════════════════════════════════════════════════ PAGE: chat (sources-btn.css) — scoped to [data-page="chat"] ═══════════════════════════════════════════════════════════════════ */ [data-page="chat"] .ai-action-btn.sources-btn { display: inline-flex; align-items: center; gap: 0.25rem; } [data-page="chat"] .ai-action-btn.sources-btn .sources-count { font-size: 0.7rem; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 9999px; background: var(--accent-glow, rgba(127,127,127,0.18)); color: var(--accent-color, currentColor); } @keyframes chat-fadeIn { from { opacity: 0 } to { opacity: 1 } } /* ═══════════════════════════════════════════════════════════════════ PAGE: DESIGN — scoped to [data-page="design"] ═══════════════════════════════════════════════════════════════════ */ /* ── Showcase layout scaffolding ONLY. Every component (.ui-*, .skuo*, inputs, .card) lives in src/site.css §3 so editing it there updates every page. ── */ [data-page="design"] { font-family: ui-sans-serif, system-ui, sans-serif; } [data-page="design"] .ds-frame { max-width: 1080px; margin: 2.5rem auto; padding: 1.25rem; border: 1px solid var(--border-strong); border-radius: 28px; background: var(--bg); } @media (min-width: 768px) { [data-page="design"] .ds-frame { padding: 2.25rem; } } [data-page="design"] .ds-topbar { display: flex; align-items: center; justify-content: flex-end; min-height: 1.5rem; } [data-page="design"] .ds-title { text-align: center; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.01em; color: var(--text-primary); margin: 0.25rem 0 2rem; } /* Masonry-style bento grid */ [data-page="design"] .ds-masonry { columns: 1; column-gap: 1rem; } @media (min-width: 640px) { [data-page="design"] .ds-masonry { columns: 2; } } @media (min-width: 1000px) { [data-page="design"] .ds-masonry { columns: 3; } } [data-page="design"] .dsc { break-inside: avoid; margin: 0 0 1rem; padding: 1.1rem 1.15rem 1.2rem; background: var(--bg-white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 26px -16px rgba(0,0,0,0.22); } .dark [data-page="design"] .dsc { background: var(--bg-elevated); border-color: var(--border-strong); } [data-page="design"] .dsc-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 0.85rem; } [data-page="design"] .row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; } [data-page="design"] .col { display: flex; flex-direction: column; gap: 0.6rem; } [data-page="design"] .btn { padding: 0.5rem 1.05rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500; } /* Swatches (showcase-only) */ [data-page="design"] .swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } [data-page="design"] .swatch { height: 52px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: flex-end; padding: 0.35rem; font-size: 0.55rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } [data-page="design"] .swatch.lt { color: var(--text-primary); text-shadow: none; } /* And more pill */ [data-page="design"] .more { text-align: center; margin-top: 0.5rem; } [data-page="design"] .more span { display: inline-block; padding: 0.55rem 1.4rem; border-radius: 999px; font-size: 0.85rem; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-strong); } /* ═══════════════════════════════════════════════════════════════════ PAGE: DESIGN-LAB — scoped to [data-page="design-lab"] ═══════════════════════════════════════════════════════════════════ */ /* ── DEMO-ONLY sandbox. Nothing here touches src/site.css §2–§3. Three columns compare button design languages against the current glossy .skuo look so we can pick a direction. ── */ [data-page="design-lab"] { font-family: ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text-primary); margin: 0; } [data-page="design-lab"] .lab-frame { max-width: 1180px; margin: 2rem auto; padding: 1.25rem; } @media (min-width: 768px) { [data-page="design-lab"] .lab-frame { padding: 2rem; } } [data-page="design-lab"] .lab-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } [data-page="design-lab"] .lab-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.01em; margin: 0; } [data-page="design-lab"] .lab-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0.25rem 0 1.75rem; } [data-page="design-lab"] .lab-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { [data-page="design-lab"] .lab-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { [data-page="design-lab"] .lab-grid { grid-template-columns: repeat(3, 1fr); } } [data-page="design-lab"] .lab-col { border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; background: var(--bg-white); } .dark [data-page="design-lab"] .lab-col { background: var(--bg-elevated); border-color: var(--border-strong); } [data-page="design-lab"] .lab-col h2 { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 600; } [data-page="design-lab"] .lab-col .note { margin: 0 0 1.1rem; font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.4; } [data-page="design-lab"] .lab-col.is-current { outline: 2px dashed color-mix(in srgb, var(--skuo-accent), transparent 55%); outline-offset: 4px; } [data-page="design-lab"] .lab-col.is-pick { outline: 2px solid var(--skuo-accent); outline-offset: 4px; } [data-page="design-lab"] .stack { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } [data-page="design-lab"] .stack .row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } [data-page="design-lab"] .icn { width: 15px; height: 15px; } /* Shared geometry so only the *language* differs between columns */ [data-page="design-lab"] .b { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.15rem; border-radius: 10px; font-size: 0.85rem; font-weight: 550; cursor: pointer; border: 1px solid transparent; transition: all 0.16s ease; -webkit-tap-highlight-color: transparent; } [data-page="design-lab"] .b.icon { padding: 0; width: 40px; height: 40px; justify-content: center; } [data-page="design-lab"] .b.pill { border-radius: 9999px; } /* ───────────────────────────────────────────────────────── LANGUAGE A — FLAT / REFINED (Linear / Vercel / Stripe) Solid fill, no gradient, hairline border, whisper shadow. ───────────────────────────────────────────────────────── */ [data-page="design-lab"] .flat.accent { background: var(--skuo-accent); color: #fff; border-color: color-mix(in srgb, var(--skuo-accent), black 12%); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } [data-page="design-lab"] .flat.accent:hover { background: color-mix(in srgb, var(--skuo-accent), black 8%); } [data-page="design-lab"] .flat.accent:active { background: color-mix(in srgb, var(--skuo-accent), black 16%); box-shadow: none; } [data-page="design-lab"] .flat.neutral { background: var(--bg-white); color: var(--text-primary); border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } [data-page="design-lab"] .flat.neutral:hover { background: var(--bg-elevated); border-color: var(--text-tertiary); } [data-page="design-lab"] .flat.neutral:active { background: color-mix(in srgb, var(--bg-elevated), black 4%); box-shadow: none; } .dark [data-page="design-lab"] .flat.neutral { background: var(--bg-elevated); } .dark [data-page="design-lab"] .flat.neutral:hover { background: color-mix(in srgb, var(--bg-elevated), white 6%); } /* ───────────────────────────────────────────────────────── LANGUAGE B — SOFT NEUMORPHIC Monochrome extrude: light shadow top-left, dark bottom-right, no shine. Press inverts to an inset. ───────────────────────────────────────────────────────── */ [data-page="design-lab"] .neu-scope-host { --neu-bg: #e8e6de; --neu-light: #ffffff; --neu-dark: #c3c0b4; } .dark [data-page="design-lab"] .neu-scope-host { --neu-bg: #33322f; --neu-light: #414039; --neu-dark: #232220; } [data-page="design-lab"] .neu-scope-host.lab-col { background: var(--neu-bg); border-color: transparent; } [data-page="design-lab"] .neu { background: var(--neu-bg); color: var(--text-primary); border: none; box-shadow: -5px -5px 10px var(--neu-light), 5px 5px 12px var(--neu-dark); } [data-page="design-lab"] .neu:hover { box-shadow: -3px -3px 7px var(--neu-light), 3px 3px 9px var(--neu-dark); } [data-page="design-lab"] .neu:active { box-shadow: inset -3px -3px 7px var(--neu-light), inset 4px 4px 9px var(--neu-dark); } [data-page="design-lab"] .neu.accent { background: var(--skuo-accent); color: #fff; box-shadow: -5px -5px 10px var(--neu-light), 5px 5px 12px color-mix(in srgb, var(--skuo-accent), black 30%); } [data-page="design-lab"] .neu.accent:active { box-shadow: inset -3px -3px 7px color-mix(in srgb, var(--skuo-accent), white 22%), inset 4px 4px 9px color-mix(in srgb, var(--skuo-accent), black 34%); } /* ───────────────────────────────────────────────────────── LANGUAGE C — REFINED (A + Current combined) Flat's hairline border + clean hover/press, but keeps a WHISPER of the current gradient, a soft lift shadow and a faint accent glow. No wet-glass sheen, no hard top-shine. ───────────────────────────────────────────────────────── */ [data-page="design-lab"] .ref.accent { color: #fff; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--skuo-accent), white 7%), color-mix(in srgb, var(--skuo-accent), black 6%)); border-color: color-mix(in srgb, var(--skuo-accent), black 14%); box-shadow: 0 1px 0 color-mix(in srgb, var(--skuo-accent), white 20%) inset, 0 2px 6px -2px color-mix(in srgb, var(--skuo-accent), transparent 55%); } [data-page="design-lab"] .ref.accent:hover { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--skuo-accent), white 12%), color-mix(in srgb, var(--skuo-accent), black 2%)); box-shadow: 0 1px 0 color-mix(in srgb, var(--skuo-accent), white 24%) inset, 0 4px 12px -3px color-mix(in srgb, var(--skuo-accent), transparent 45%); } [data-page="design-lab"] .ref.accent:active { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--skuo-accent), black 4%), color-mix(in srgb, var(--skuo-accent), black 10%)); box-shadow: 0 1px 3px rgba(0,0,0,0.14) inset; } [data-page="design-lab"] .ref.neutral { color: var(--text-primary); background-image: linear-gradient(to bottom, var(--bg-white), var(--bg-elevated)); border-color: var(--border-strong); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px -1px rgba(0,0,0,0.12); } [data-page="design-lab"] .ref.neutral:hover { background-image: linear-gradient(to bottom, var(--bg-white), color-mix(in srgb, var(--bg-elevated), black 3%)); border-color: var(--text-tertiary); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 9px -2px rgba(0,0,0,0.16); } [data-page="design-lab"] .ref.neutral:active { box-shadow: 0 1px 3px rgba(0,0,0,0.14) inset; } .dark [data-page="design-lab"] .ref.neutral { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg-elevated), white 6%), var(--bg-elevated)); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 6px -2px rgba(0,0,0,0.5); } [data-page="design-lab"] .swatches { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-top: 2rem; } [data-page="design-lab"] .swatch { height: 46px; border-radius: 10px; border: 1px solid var(--border); display:flex; align-items:flex-end; padding: 0.3rem; font-size: 0.55rem; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* ═══════════════════════════════════════════════════════════════════ PAGE: EDITOR — scoped to [data-page="editor"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="editor"]) { background-color: var(--bg); transition: background-color 0.3s ease; } [data-page="editor"] { background-color: transparent; color: var(--text-primary); font-family: 'Satoshi', 'Inter', sans-serif; margin: 0; padding: 0; transition: color 0.3s ease; } [data-page="editor"] .header-island { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 9999px; padding: 2px 4px; display: flex; align-items: center; gap: 2px; height: 38px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: auto; } .dark [data-page="editor"] .header-island { background: rgba(39, 39, 42, 0.8); border-color: rgba(255, 255, 255, 0.1); } [data-page="editor"] .editor-toolbar { background: var(--bg-elevated); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 6px; display: flex; align-items: center; gap: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); z-index: 100; transition: all 0.3s ease; } .dark [data-page="editor"] .editor-toolbar { background: var(--surface-dark); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* toolbar-btn — layout only; appearance via shared .skuo .skuo-icon */ [data-page="editor"] .toolbar-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; } /* control-btn — layout only; appearance via shared .skuo */ [data-page="editor"] .control-btn { padding: 4px 8px; font-size: 10px; font-weight: bold; display: inline-flex; align-items: center; border-radius: 4px; cursor: pointer; white-space: nowrap; } [data-page="editor"] .editor-container { max-width: 900px; margin: 0 auto; padding: 20px; } [data-page="editor"] .editor-paper { background: var(--bg-elevated); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); min-height: 1100px; padding: 80px 90px; border-radius: 4px; transition: background-color 0.3s ease, box-shadow 0.3s ease; position: relative; } .dark [data-page="editor"] .editor-paper { background: var(--surface-dark); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } [data-page="editor"] [contenteditable]:focus { outline: none; } [data-page="editor"] .placeholder:empty:before { content: attr(data-placeholder); color: var(--text-tertiary); cursor: text; } [data-page="editor"] .editor-image-container { position: relative; display: inline-block; margin: 10px; cursor: default; max-width: 100%; } [data-page="editor"] .editor-image-container img { display: block; border-radius: 8px; transition: outline 0.2s ease; } [data-page="editor"] .editor-image-container:hover img { outline: 2px solid var(--accent); } [data-page="editor"] .image-controls { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: var(--deep-dark); border-radius: 8px; padding: 4px; display: none; gap: 4px; z-index: 10; } [data-page="editor"] .editor-image-container:hover .image-controls { display: flex; } [data-page="editor"] .float-left { float: left; margin-right: 20px; } [data-page="editor"] .float-right { float: right; margin-left: 20px; } [data-page="editor"] .inline { display: block; margin: 20px auto; } [data-page="editor"] #blog-editor h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } [data-page="editor"] #blog-editor h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.8rem; } [data-page="editor"] #blog-editor p { margin-bottom: 1rem; line-height: 1.7; } [data-page="editor"] #blog-editor ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; } [data-page="editor"] #blog-editor ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1rem; } [data-page="editor"].no-scrollbar::-webkit-scrollbar { display: none; } [data-page="editor"].no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* clear space for the floating nav on the right */ [data-page="editor"] header > div:last-child { padding-right: 12.5rem; } /* ═══════════════════════════════════════════════════════════════════ PAGE: GOALS — scoped to [data-page="goals"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="goals"]) { --bg-light: var(--bg); --bg-dark: var(--deep-dark); --accent-olive: var(--accent); --accent-mint: var(--accent-light); } [data-page="goals"] { transition: background-color 0.3s ease, color 0.3s ease; } [data-page="goals"] .serif-text { font-family: 'Century', 'Georgia', serif; } [data-page="goals"] .mesh-gradient { background-image: radial-gradient(at 10% 20%, rgba(158, 179, 147, 0.1) 0px, transparent 50%), radial-gradient(at 90% 10%, rgba(95, 99, 79, 0.05) 0px, transparent 50%), radial-gradient(at 50% 90%, rgba(158, 179, 147, 0.05) 0px, transparent 50%); background-attachment: fixed; } /* --- Global Flat Styles --- */ /* .skuomorphic-button rules removed — shared .skuo + .discord in src/site.css §3 */ /* ═══════════════════════════════════════════════════════════════════ PAGE: HOME — scoped to [data-page="home"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="home"]) { scroll-behavior: smooth; } /* selected text highlights with the accent color */ [data-page="home"] ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); } [data-page="home"] ::-moz-selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); } [data-page="home"] .serif-text { font-family: 'Century', 'Century Schoolbook', Georgia, serif; } [data-page="home"] .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-tertiary); } /* ── Hero profile picture ──────────────────────────────────── */ [data-page="home"] .hero-pfp { width: 3rem; height: 3rem; border-radius: 0.9rem; flex: none; object-fit: cover; filter: grayscale(1); border: 1px solid var(--border-strong); background: var(--bg-elevated); transition: filter 0.6s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="home"] .hero-pfp:hover { filter: grayscale(0); transform: scale(1.04); } /* ── Hero search bar (feeds Okemo Astra) — the hero centerpiece ── */ [data-page="home"] .hero-search { display: flex; align-items: center; gap: 6px; width: min(620px, 100%); margin-inline: auto; height: 3.75rem; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); transition: border-color 0.3s ease, box-shadow 0.3s ease; } [data-page="home"] .hero-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 80%); } /* local reset of the global unified-input styling (src/site.css §3), same scoping Astra's .bar input uses (incl. the .dark shadow reset) */ [data-page="home"] .hero-search input { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; outline: none; font-size: 1.1rem; color: var(--text-primary); } /* the pill container carries the focus ring, not the input — this also beats the page's global :focus-visible:not(.skuo) outline rule */ [data-page="home"] .hero-search input:focus, [data-page="home"] .hero-search input:focus-visible { outline: none; border: none; box-shadow: none; } .dark [data-page="home"] .hero-search input { box-shadow: none; } [data-page="home"] .hero-search .skuo { flex: none; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 0.9rem; white-space: nowrap; } /* ── Project catalog rows ──────────────────────────────────── */ [data-page="home"] .work-row { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem 1.5rem; padding: 2rem 0.75rem; border-top: 1px solid var(--border); border-radius: 14px; transition: background-color 0.3s ease, padding-left 0.3s ease; } /* mobile: title, description and action stack in the right column */ [data-page="home"] .work-row > div, [data-page="home"] .work-desc, [data-page="home"] .work-action { grid-column: 2; } @media (min-width: 768px) { [data-page="home"] .work-row { grid-template-columns: 3.5rem minmax(0, 14rem) 1fr auto; align-items: baseline; padding: 2.25rem 1.25rem; } [data-page="home"] .work-row > div, [data-page="home"] .work-desc, [data-page="home"] .work-action { grid-column: auto; } } [data-page="home"] .work-row:not(.is-soon):hover { background: var(--bg-elevated); padding-left: 1.5rem; } [data-page="home"] .work-index { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-tertiary); padding-top: 0.55rem; transition: color 0.3s ease; } [data-page="home"] .work-row:not(.is-soon):hover .work-index { color: var(--accent); } [data-page="home"] .work-title { font-family: 'Satoshi', sans-serif; font-weight: 600; font-size: 1.65rem; letter-spacing: -0.02em; color: var(--text-primary); display: inline-flex; align-items: center; gap: 0.5rem; } [data-page="home"] .work-arrow { opacity: 0; transform: translateX(-6px); color: var(--accent); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="home"] .work-row:not(.is-soon):hover .work-arrow { opacity: 1; transform: translateX(0); } [data-page="home"] .work-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; max-width: 34rem; } [data-page="home"] .work-action { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; transition: color 0.3s ease; } [data-page="home"] .work-row:not(.is-soon):hover .work-action { color: var(--text-primary); } [data-page="home"] .is-soon { opacity: 0.5; } /* ── Reveal ────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } [data-page="home"] .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-page="home"] .reveal.in { opacity: 1; transform: translateY(0); } [data-page="home"] .load { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } [data-page="home"] .d1 { animation-delay: 0.05s; } [data-page="home"] .d2 { animation-delay: 0.18s; } [data-page="home"] .d3 { animation-delay: 0.32s; } [data-page="home"] .d4 { animation-delay: 0.46s; } @media (prefers-reduced-motion: reduce) { [data-page="home"] *, [data-page="home"] *::before, [data-page="home"] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-page="home"] .reveal { opacity: 1; transform: none; } } /* Generic focus ring for links/plain controls. Excludes .skuo — those have their own focus ring in src/site.css §3; forcing border-radius here would reshape the round icon buttons into a square. */ [data-page="home"] :focus-visible:not(.skuo) { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════ PAGE: MANAGE — scoped to [data-page="manage"] ═══════════════════════════════════════════════════════════════════ */ [data-page="manage"] { font-family: 'Satoshi', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } [data-page="manage"] .header-island { background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 999px; padding: 4px; display: flex; align-items: center; pointer-events: auto; } .dark [data-page="manage"] .header-island { background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); border-color: var(--border); } [data-page="manage"] .manage-card:hover { transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════════════ PAGE: PRIVACY — scoped to [data-page="privacy"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="privacy"]) { --bg-dark: var(--deep-dark); --accent-olive: var(--accent); --accent-mint: var(--accent-light); } [data-page="privacy"] { transition: background-color 0.3s ease, color 0.3s ease; } [data-page="privacy"] .serif-text { font-family: 'Century', 'Georgia', serif; } /* --- Global Flat Styles --- */ /* .skuomorphic-button rules removed — shared .skuo + .discord in src/site.css §3 */ /* ═══════════════════════════════════════════════════════════════════ PAGE: RESEARCH — scoped to [data-page="research"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="research"]) { --bg-light: var(--bg); --bg-dark: var(--deep-dark); --accent-olive: var(--accent); --accent-mint: var(--accent-light); } [data-page="research"] { background-color: var(--bg); font-family: 'Satoshi', 'Inter', sans-serif; margin: 0; padding: 0; color: var(--accent); transition: background-color 0.3s ease, color 0.3s ease; } .dark [data-page="research"] { background-color: var(--deep-dark); } [data-page="research"] .serif-text { font-family: 'Century', 'Georgia', serif; } [data-page="research"] .no-scrollbar::-webkit-scrollbar { display: none; } [data-page="research"] .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } [data-page="research"] .rich-content h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; } [data-page="research"] .rich-content h2 { font-size: 1.75rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3; } [data-page="research"] .rich-content p { margin-bottom: 1.25rem; line-height: 1.8; color: inherit; } [data-page="research"] .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } [data-page="research"] #reader-modal { display: none; opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; background-color: var(--bg); z-index: 1000; } .dark [data-page="research"] #reader-modal { background-color: var(--deep-dark); } [data-page="research"] #reader-modal.active { opacity: 1; pointer-events: auto; } [data-page="research"] .modal-content { transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; height: 100%; display: flex; flex-direction: column; } [data-page="research"] #reader-modal.active .modal-content { transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════ PAGE: SEARCH — scoped to [data-page="search"] ═══════════════════════════════════════════════════════════════════ */ /* ── Astra layout & identity (appearance tokens come from src/site.css §2) ── */ /* Cosmic playground canvas: page-local warm parchment (do NOT edit shared tokens). */ [data-page="search"] { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x: hidden; background-color: #fdf9f4; } .dark [data-page="search"] { background-color: #1e1a18; } [data-page="search"] [hidden] { display: none !important; } /* stars */ [data-page="search"] #stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; } [data-page="search"] .star { position: absolute; border-radius: 50%; opacity: .15; } @keyframes twinkle { 0%,100% { opacity: .12; } 50% { opacity: .85; } } /* hero */ [data-page="search"] .hero { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 1rem; box-sizing: border-box; } [data-page="search"] .wordmark { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(92deg, var(--accent) 10%, #f0c27b 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; } [data-page="search"] .tagline { margin: -2px 0 2px; font-size: .85rem; font-style: italic; color: var(--text-tertiary); } [data-page="search"] .constellation { position: absolute; top: 16%; right: 14%; width: 76px; height: 50px; color: var(--accent); opacity: .55; pointer-events: none; } [data-page="search"] .hint { margin: 2px 0 0; font-size: .72rem; color: var(--text-tertiary); } [data-page="search"] .foot { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--text-tertiary); } [data-page="search"] .foot a { color: inherit; } [data-page="search"] .theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 30; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; font-size: .9rem; } /* search bar (hero + results share .bar) */ [data-page="search"] .bar { display: flex; align-items: center; gap: 6px; width: min(560px, 92vw); height: 46px; box-sizing: border-box; padding: 4px 5px 4px 14px; border-radius: 999px; background: var(--bg-white); border: 1px solid var(--border-strong); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: relative; } [data-page="search"] .bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 80%); } [data-page="search"] .bar-icon { opacity: .55; font-size: .95rem; } [data-page="search"] .bar input { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none; outline: none; padding: 0; height: 100%; font-size: .95rem; color: var(--text-primary); } [data-page="search"] .bar input:focus { outline: none; box-shadow: none; border: none; } .dark [data-page="search"] .bar input { box-shadow: none; } [data-page="search"] .bar .skuo { height: 36px; padding: 0 14px; border-radius: 999px; font-size: .82rem; white-space: nowrap; } /* rainbow ring (i'm feeling cosmic) */ [data-page="search"] .ai-ring { border-radius: 999px; padding: 1.5px; background: conic-gradient(from var(--rb, 0deg), #ff5f6d, #ffc371, #f0e05a, #5fdc7d, #5aa7ff, #b06bff, #ff5f6d); animation: rb-spin 3.2s linear infinite; } [data-page="search"] .ai-ring .skuo { height: 33px; background: var(--bg-white); color: var(--text-primary); font-weight: 600; box-shadow: none; } @property --rb { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes rb-spin { to { --rb: 360deg; } } @supports not (background: conic-gradient(from var(--rb), red, blue)) { [data-page="search"] .ai-ring { animation: none; } [data-page="search"] .ai-panel { border: 1px solid var(--border-strong); background: var(--bg-white); } } /* hero buttons below the bar (google homage) */ [data-page="search"] .hero-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } [data-page="search"] .hero-btns .skuo { height: 38px; padding: 0 18px; border-radius: 999px; font-size: .85rem; } [data-page="search"] .hero-btns .ai-ring .skuo { height: 35px; } /* suggestions dropdown */ [data-page="search"] .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-white); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; z-index: 20; } [data-page="search"] .suggest button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 16px; font-size: .85rem; color: var(--text-primary); cursor: pointer; } [data-page="search"] .suggest button.active, [data-page="search"] .suggest button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } [data-page="search"] .suggest button.active::before { content: '✦ '; color: var(--accent); } /* results view */ [data-page="search"] .results { position: relative; z-index: 1; max-width: none; margin: 0; padding: 1rem 1rem 4rem clamp(1rem, 12vw, 180px); } [data-page="search"] .r-top { display: flex; align-items: center; gap: 14px; padding: 6px 2.8rem 18px 0; } [data-page="search"] .r-logo { font-weight: 700; font-size: 1.05rem; text-decoration: none; background: linear-gradient(92deg, var(--accent) 10%, #f0c27b 90%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } [data-page="search"] .results .bar { width: 100%; max-width: 560px; height: 42px; } [data-page="search"] .results .bar .skuo { height: 32px; } [data-page="search"] .r-meta { font-size: .75rem; color: var(--text-tertiary); margin: 0 4px 14px; } /* google-classic left rail: bar, panel and results share one left edge */ [data-page="search"] .r-meta-row, [data-page="search"] .ai-panel, [data-page="search"] #result-list { max-width: 640px; } [data-page="search"] #result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } [data-page="search"] .result { display: grid; grid-template-columns: 26px 1fr; gap: 10px; } /* favicon chip, slightly tilted (cosmic playground mischief) */ [data-page="search"] .r-favi { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-white); margin-top: 2px; } [data-page="search"] .result:nth-of-type(odd) .r-favi { transform: rotate(-7deg); } [data-page="search"] .result:nth-of-type(even) .r-favi { transform: rotate(6deg); } [data-page="search"] .r-favi-fallback { display: inline-grid; place-items: center; font-size: .7rem; color: var(--accent); } /* google grammar: site + breadcrumb above the title */ [data-page="search"] .r-site { font-size: .78rem; color: var(--text-primary); } [data-page="search"] .r-crumb { font-size: .72rem; color: var(--text-tertiary); word-break: break-all; } [data-page="search"] .result .r-title { font-size: 1.05rem; color: var(--accent); text-decoration: none; line-height: 1.35; display: inline-block; margin-top: 2px; overflow-wrap: anywhere; } [data-page="search"] .result .r-title:hover { text-decoration: underline wavy var(--accent-light); text-underline-offset: 3px; } [data-page="search"] .result .r-snippet { margin: 2px 0 0; font-size: .84rem; color: var(--text-secondary); line-height: 1.5; } /* AI answer panel — rainbow conic border, always on */ [data-page="search"] .ai-panel { margin: 0 0 22px; border-radius: 18px; border: 1.5px solid transparent; background: linear-gradient(var(--bg-white), var(--bg-white)) padding-box, conic-gradient(from var(--rb, 0deg), var(--accent), #f0c27b, var(--accent-light), #f0c27b, var(--accent)) border-box; animation: rb-spin 6s linear infinite; overflow: hidden; transition: border-color .6s ease; } /* done: shimmer settles to a plain hairline */ [data-page="search"] .ai-panel.done { border-color: var(--border-strong); background: var(--bg-white); animation: none; } [data-page="search"] .ai-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 12px 16px 0; font-weight: 700; font-size: .92rem; color: var(--accent); } [data-page="search"] .ai-body { padding: 12px 16px 16px; font-size: .88rem; line-height: 1.6; color: var(--text-primary); } [data-page="search"] .ai-body a { color: var(--accent); } [data-page="search"] .ai-error { padding: 0 16px 14px; font-size: .84rem; color: var(--text-secondary); } /* thinking row: pulsing orb + shimmer-sweep line (chatgpt 'thinking…' grammar) */ [data-page="search"] .ai-thinking { display: flex; align-items: center; gap: 9px; padding: 10px 2px; } [data-page="search"] .ai-orb { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: orb-pulse 1.2s ease-in-out infinite; flex: none; } @keyframes orb-pulse { 0%,100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1.15); opacity: 1; } } [data-page="search"] .ai-thinking-line { font-size: .84rem; background: linear-gradient(90deg, var(--text-tertiary) 20%, var(--text-primary) 50%, var(--text-tertiary) 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: line-shimmer 1.6s linear infinite; } @keyframes line-shimmer { to { background-position: -200% 0; } } /* meta row + AI toggle */ [data-page="search"] .r-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 640px; } [data-page="search"] .r-meta-row .r-meta { margin: 0 4px 14px; } [data-page="search"] #ai-toggle { height: 26px; padding: 0 12px; border-radius: 999px; font-size: .72rem; line-height: 1; margin-bottom: 14px; } [data-page="search"] #ai-toggle[aria-pressed="false"] { opacity: .55; filter: saturate(0); } /* tabs (google grammar: text tabs, accent underline) */ [data-page="search"] .r-tabs { display: flex; gap: 18px; max-width: 640px; margin: -6px 0 16px; border-bottom: 1px solid var(--border-strong); } [data-page="search"] .r-tab { background: none; border: none; padding: 8px 2px 10px; font-family: inherit; font-size: .85rem; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } [data-page="search"] .r-tab:hover { color: var(--text-primary); } [data-page="search"] .r-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* images grid (masonry via css columns) */ [data-page="search"] #image-grid { max-width: 900px; columns: 200px; column-gap: 10px; } [data-page="search"] .ig-item { display: block; width: 100%; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--bg-elevated); cursor: zoom-in; margin: 0 0 10px; break-inside: avoid; position: relative; } [data-page="search"] .ig-item img { display: block; width: 100%; height: auto; } [data-page="search"] .ig-host { position: absolute; left: 6px; bottom: 6px; font-size: .62rem; background: rgba(0,0,0,.55); color: #fff; padding: 1px 7px; border-radius: 999px; backdrop-filter: blur(4px); } [data-page="search"] .ig-skel { break-inside: avoid; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(100deg, var(--bg-elevated) 40%, var(--border-strong) 50%, var(--bg-elevated) 60%); background-size: 200% 100%; animation: ig-shimmer 1.4s linear infinite; } [data-page="search"] .ig-skel:nth-child(3n) { height: 130px; } [data-page="search"] .ig-skel:nth-child(3n+1) { height: 190px; } [data-page="search"] .ig-skel:nth-child(3n+2) { height: 160px; } @keyframes ig-shimmer { to { background-position: -200% 0; } } /* follow-up row + thread */ [data-page="search"] .ai-follow { display: flex; gap: 6px; padding: 0 12px 12px; } [data-page="search"] .ai-follow input { flex: 1; min-width: 0; height: 32px; border-radius: 999px; padding: 0 12px; font-size: .82rem; } [data-page="search"] .ai-follow .skuo { height: 32px; width: 32px; padding: 0; border-radius: 50%; flex: none; } /* chat thread: plain Astra turns, grey right-aligned user bubbles */ [data-page="search"] .ai-turn { margin: 2px 0 8px; } [data-page="search"] .ai-bubble-user { width: fit-content; max-width: 85%; margin: 12px 0 4px auto; padding: 8px 13px; border-radius: 16px 16px 4px 16px; background: var(--bg-elevated); border: 1px solid var(--border-strong); font-size: .85rem; color: var(--text-primary); } [data-page="search"] #ai-expand { width: 28px; height: 28px; padding: 0; border-radius: 8px; font-size: .85rem; flex: none; } [data-page="search"] .status-card { text-align: center; padding: 2rem 1rem; font-size: .9rem; color: var(--text-secondary); } [data-page="search"] .status-card .big { font-size: 1.6rem; display: block; margin-bottom: 8px; } /* image preview: right side panel (desktop) / bottom sheet (mobile) */ [data-page="search"] #ig-preview { position: fixed; inset: 0; z-index: 70; } [data-page="search"] .igp-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); } [data-page="search"] .igp-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 94vw); padding: 16px; overflow-y: auto; border-radius: 18px 0 0 18px; display: flex; flex-direction: column; gap: 10px; } [data-page="search"] .igp-close { align-self: flex-end; width: 30px; height: 30px; padding: 0; border-radius: 50%; flex: none; } [data-page="search"] .igp-imgwrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-white); } [data-page="search"] .igp-imgwrap img { display: block; width: 100%; height: auto; } [data-page="search"] .igp-title { font-size: .9rem; color: var(--text-primary); line-height: 1.4; } [data-page="search"] .igp-host { font-size: .75rem; color: var(--text-tertiary); } [data-page="search"] .igp-actions { display: flex; gap: 8px; } [data-page="search"] .igp-actions .skuo { height: 34px; padding: 0 14px; border-radius: 999px; font-size: .8rem; display: inline-flex; align-items: center; text-decoration: none; } /* fullscreen: the same panel becomes a fixed overlay (no state loss mid-stream) */ [data-page="search"] .ai-panel.ai-fullscreen { position: fixed; inset: 0; z-index: 60; max-width: none; margin: 0; border-radius: 0; height: 100dvh; display: flex; flex-direction: column; } [data-page="search"] .ai-panel.ai-fullscreen > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; } [data-page="search"] .ai-panel.ai-fullscreen .ai-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; } [data-page="search"] .ai-panel.ai-fullscreen .ai-follow { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* infinite-scroll sentinel */ [data-page="search"] .r-sentinel { list-style: none; text-align: center; padding: 8px 0 4px; font-size: .8rem; color: var(--text-tertiary); } [data-page="search"] .r-sentinel-dot { display: inline-block; animation: sentinel-pulse 1.2s ease-in-out infinite; } @keyframes sentinel-pulse { 0%,100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } } [data-page="search"] .r-sentinel .skuo { font-size: .78rem; margin-top: 4px; } @media (max-width: 768px) { /* ── mobile mode: a different layout, not a shrunk desktop column ── */ [data-page="search"] .bar .skuo .lbl { display: none; } /* icon-first bar button */ [data-page="search"] .hero-btns .skuo .lbl { display: none; } /* icon-first hero pills */ [data-page="search"] .hero .wordmark { font-size: 1.5rem; } [data-page="search"] .constellation { right: 6%; top: 12%; } [data-page="search"] .results { padding: .75rem 0 3rem; } /* full-bleed: rows go edge to edge */ [data-page="search"] .r-top { flex-wrap: nowrap; gap: 8px; padding: 6px calc(2.2rem + 18px) 12px 12px; } [data-page="search"] .r-logo { font-size: .95rem; } [data-page="search"] .results .bar { max-width: none; height: 40px; } [data-page="search"] .r-meta-row, [data-page="search"] .ai-panel, [data-page="search"] #result-list { max-width: none; } [data-page="search"] .r-meta-row { margin: 0 16px 12px; } [data-page="search"] .r-meta-row .r-meta { margin: 0; } [data-page="search"] #ai-toggle { margin-bottom: 0; } [data-page="search"] .r-tabs { max-width: none; margin: -4px 16px 14px; } [data-page="search"] #image-grid { max-width: none; margin: 0 12px; columns: 150px; } [data-page="search"] .ai-panel { margin: 0 12px 18px; } [data-page="search"] #result-list { gap: 0; } [data-page="search"] .result { padding: 12px 16px; gap: 8px; border-top: 1px solid var(--border-strong); } [data-page="search"] .result:last-child { border-bottom: 1px solid var(--border-strong); } [data-page="search"] .status-card { margin: 0 12px; } [data-page="search"] .igp-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82vh; border-radius: 18px 18px 0 0; } } @media (prefers-reduced-motion: reduce) { [data-page="search"] .star, [data-page="search"] .ai-ring, [data-page="search"] .ai-panel, [data-page="search"] .r-sentinel-dot, [data-page="search"] .ig-skel { animation: none !important; } [data-page="search"] .ai-orb { animation: none; } [data-page="search"] .ai-thinking-line { animation: none; background: none; color: var(--text-tertiary); } [data-page="search"] .ai-panel { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ PAGE: themes (styles.css) — scoped to [data-page="themes"] ═══════════════════════════════════════════════════════════════════ */ @keyframes gradient-sweep-y { 0% { background-position: 50% 120%; } 50% { background-position: 50% 50%; } 100% { background-position: 50% -20%; } } [data-page="themes"] .animate-gradient-sweep-y { background-size: 100% 300%; animation: gradient-sweep-y 2.2s ease-out 200ms both; will-change: background-position; } [data-page="themes"] .animate-gradient { min-height: 200px; background: linear-gradient(180deg, #ff6b6b, #f7d794, #54a0ff, #ff6b6b); background: linear-gradient(180deg, #ff6b6b, #f7d794, #54a0ff, #a454ff, #ff6b6b); background-size: 100% 300%; animation: animatedgradientY 6s ease infinite; } @keyframes animatedgradientY { 0% { background-position: 0% 0%; } 50% { background-position: 0% 110%; } 100% { background-position: 0% 300%; } } [data-page="themes"] .animate-gradient-alt { min-height: 200px; background: linear-gradient(180deg, #ff6b6b, #f7d794, #54a0ff, #a454ff, #ff6b6b); background-size: 100% 300%; animation: animatedgradientY2 7s ease infinite; } @keyframes animatedgradientY2 { 0% { background-position: 0% 0%; } 50% { background-position: 0% 110%; } 100% { background-position: 0% 300%; } } [data-page="themes"] .animate-gradient2 { background-size: 200%; -webkit-animation: animatedgradient2 3s linear infinite forwards; -moz-animation: animatedgradient2 3s linear infinite forwards; animation: animatedgradient2 3s linear infinite forwards; color: transparent; -webkit-background-clip: text; background-clip: text; } @keyframes animatedgradient2 { 0% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } 100% { background-position: 200% 0%; } } html:has(> body[data-page="themes"]) { --background-gra: repeating-linear-gradient( -45deg, rgba(220, 220, 220, 0.5), rgba(220, 220, 220, 0.5) 6.5px, #ffffff 6.5px, #ffffff 32.5px ); --background-gra-dark: repeating-linear-gradient( -45deg, rgb(26, 26, 26), rgb(26, 26, 26) 6.5px, #000000 6.5px, #000000 32.5px ); } [data-page="themes"] .changingtext:hover:after { content: attr(data-hover); } [data-page="themes"] header { transition: all 0.2s ease-out; position: fixed; } [data-page="themes"] header.sticky { transition: all 0.2s ease-in-out; background: rgba(125, 125, 125, 0); position: fixed; } [data-page="themes"] #fact-container { opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; overflow: hidden; } [data-page="themes"] #fact-container.show { opacity: 1; transform: translateY(0); } [data-page="themes"] { font-family: 'Inter', sans-serif; } [data-page="themes"] .fade-in-blur { animation: fadeInBlur 0.4s ease-out forwards; } @keyframes fadeInBlur { 0% { opacity: 0; backdrop-filter: blur(0px); pointer-events: none; } 100% { opacity: 1; backdrop-filter: blur(100px); pointer-events: auto; } } [data-page="themes"] .fade-in-text { animation: fadeInText 2s ease-out forwards; } @keyframes fadeInText { 0% { opacity: 0; transform: scale(0.98); filter: blur(10px); } 50% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 1; transform: scale(1); -position: 200% 0%; } } /* ═══════════════════════════════════════════════════════════════════ PAGE: TOS — scoped to [data-page="tos"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="tos"]) { --bg-dark: var(--deep-dark); --accent-olive: var(--accent); --accent-mint: var(--accent-light); } [data-page="tos"] { transition: background-color 0.3s ease, color 0.3s ease; } [data-page="tos"] .serif-text { font-family: 'Century', 'Georgia', serif; } /* --- Global Flat Styles --- */ /* .skuomorphic-button rules removed — shared .skuo + .discord in src/site.css §3 */ /* ═══════════════════════════════════════════════════════════════════ PAGE: VERSION — scoped to [data-page="version"] ═══════════════════════════════════════════════════════════════════ */ html:has(> body[data-page="version"]) { background-color: var(--bg); transition: background-color 0.3s ease; } [data-page="version"] { background-color: transparent; color: var(--text-primary); font-family: 'Satoshi', 'Inter', sans-serif; margin: 0; padding: 0; transition: color 0.3s ease; } [data-page="version"] .header-island { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 9999px; padding: 2px 4px; display: flex; align-items: center; gap: 2px; height: 38px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: auto; } .dark [data-page="version"] .header-island { background: rgba(39, 39, 42, 0.8); border-color: rgba(255, 255, 255, 0.1); } [data-page="version"] .manage-container { max-width: 600px; margin: 0 auto; padding: 100px 20px; } [data-page="version"] .manage-paper { background: var(--bg-elevated); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 40px; border-radius: 24px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .dark [data-page="version"] .manage-paper { background: var(--surface-dark); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); } /* ═══════════════════════════════════════════════════════════════════ PAGE: WORD — scoped to [data-page="word"] ═══════════════════════════════════════════════════════════════════ */ [data-page="word"] *, [data-page="word"] *::before, [data-page="word"] *::after { box-sizing: border-box; } html:has(> body[data-page="word"]), [data-page="word"] { height: 100%; margin: 0; padding: 0; overflow: hidden; } [data-page="word"] { font-family: 'Satoshi', 'Inter', sans-serif; background: var(--bg); color: var(--text-primary); } /* ── Layout shell ─────────────────────────────────────────── */ [data-page="word"] #app { display: flex; flex-direction: column; height: 100vh; } /* ── Header ──────────────────────────────────────────────── */ [data-page="word"] .ow-header { height: 52px; display: flex; align-items: center; padding: 0 14px; padding-right: 13rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); gap: 6px; flex-shrink: 0; z-index: 100; } @media (max-width: 767px) { [data-page="word"] .ow-header { padding-right: 14px; } } [data-page="word"] .ow-app-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; margin-right: 2px; } [data-page="word"] .vr { width: 1px; height: 18px; background: var(--border-strong); margin: 0 6px; flex-shrink: 0; } [data-page="word"] #doc-title { font-size: 13px; font-weight: 500; background: transparent; border: none; outline: none; color: var(--text-secondary); font-family: inherit; min-width: 100px; max-width: 240px; padding: 3px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; } [data-page="word"] #doc-title:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); } .dark [data-page="word"] #doc-title:hover { background: rgba(255, 255, 255, 0.05); } [data-page="word"] #doc-title:focus { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); } .dark [data-page="word"] #doc-title:focus { background: rgba(255, 255, 255, 0.05); } [data-page="word"] .hdr-word-pill { font-size: 11px; color: var(--text-tertiary); padding: 3px 9px; background: var(--border); border-radius: 12px; white-space: nowrap; } /* header action buttons — layout only; appearance via shared .skuo .skuo-icon */ [data-page="word"] .hdr-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; cursor: pointer; font-size: 14px; } [data-page="word"] .hdr-profile { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; overflow: hidden; user-select: none; margin-left: 4px; } [data-page="word"] .hdr-profile img { width: 100%; height: 100%; object-fit: cover; } /* ── Toolbar ─────────────────────────────────────────────── */ [data-page="word"] .ow-toolbar { display: flex; align-items: center; padding: 5px 14px; gap: 1px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } [data-page="word"] .ow-toolbar::-webkit-scrollbar { display: none; } /* toolbar buttons — layout only; appearance via shared .skuo .skuo-icon */ [data-page="word"] .tb-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; cursor: pointer; font-size: 13px; } [data-page="word"] .tb-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 5px; flex-shrink: 0; } [data-page="word"] .tb-select { height: 28px; padding: 0 8px; font-size: 12px; flex-shrink: 0; } /* ── Main area ───────────────────────────────────────────── */ [data-page="word"] .ow-main { display: flex; flex: 1; overflow: hidden; } /* ── Document scroll ─────────────────────────────────────── */ [data-page="word"] .doc-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 40px 28px 60px; background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* ── Editor paper ────────────────────────────────────────── */ [data-page="word"] .editor-paper { max-width: 816px; margin: 0 auto; background: var(--bg-elevated); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--border); border-radius: 3px; min-height: 1056px; padding: 72px 88px; position: relative; transition: background 0.3s, box-shadow 0.3s; } .dark [data-page="word"] .editor-paper { background: var(--surface-dark); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border); } @media (max-width: 900px) { [data-page="word"] .editor-paper { padding: 48px 40px; } } @media (max-width: 600px) { [data-page="word"] .editor-paper { padding: 32px 24px; } } @keyframes rainbow-caret { 0%, 14% { caret-color: #ff4d4d; } 14.001%, 28% { caret-color: #ff944d; } 28.001%, 42% { caret-color: #ffd24d; } 42.001%, 56% { caret-color: #4dff88; } 56.001%, 70% { caret-color: #4da6ff; } 70.001%, 84% { caret-color: #944dff; } 84.001%, 100% { caret-color: #ff4d94; } } /* ── Editor content ──────────────────────────────────────── */ [data-page="word"] #editor { outline: none; min-height: calc(1056px - 144px); font-size: 1rem; line-height: 1.85; color: var(--text-primary); font-family: 'Satoshi', 'Inter', sans-serif; caret-color: var(--accent); animation: rainbow-caret 7s linear infinite; word-break: break-word; } [data-page="word"] #editor:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); pointer-events: none; } [data-page="word"] #editor h1 { font-size: 2em; font-weight: 700; line-height: 1.25; margin: 0.8em 0 0.3em; color: var(--text-primary); } [data-page="word"] #editor h2 { font-size: 1.5em; font-weight: 650; line-height: 1.35; margin: 0.7em 0 0.25em; } [data-page="word"] #editor h3 { font-size: 1.2em; font-weight: 600; line-height: 1.4; margin: 0.6em 0 0.2em; } [data-page="word"] #editor p { margin: 0.4em 0; } [data-page="word"] #editor ul, [data-page="word"] #editor ol { padding-left: 1.6em; margin: 0.5em 0; } [data-page="word"] #editor li { margin: 0.2em 0; line-height: 1.75; } [data-page="word"] #editor blockquote { border-left: 3px solid var(--accent); padding-left: 1.1em; margin: 0.9em 0; color: var(--text-secondary); font-style: italic; } [data-page="word"] #editor a { color: var(--accent); text-decoration: underline; } [data-page="word"] #editor hr { border: none; border-top: 1px solid var(--border-strong); margin: 1.2em 0; } [data-page="word"] #editor code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--border); padding: 0.1em 0.4em; border-radius: 4px; } [data-page="word"] #editor pre { font-family: 'JetBrains Mono', monospace; font-size: 0.84em; background: var(--surface-dark); color: #e2e0d8; padding: 1em 1.2em; border-radius: 8px; overflow-x: auto; margin: 0.9em 0; } /* ── AI Panel ────────────────────────────────────────────── */ [data-page="word"] #ai-panel { width: 356px; min-width: 356px; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-elevated); overflow: hidden; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 200; } [data-page="word"] #ai-panel.collapsed { width: 0; min-width: 0; opacity: 0; pointer-events: none; overflow: hidden; } @media (max-width: 768px) { [data-page="word"] #ai-panel { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; width: 100% !important; min-width: 100% !important; border-left: none; border-top: 1px solid var(--border); transform: translateY(0); opacity: 1; } [data-page="word"] #ai-panel.collapsed { transform: translateY(100%); opacity: 0; pointer-events: none; width: 100% !important; min-width: 100% !important; } } [data-page="word"] .ai-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--accent); color: white; flex-shrink: 0; } [data-page="word"] .ai-header-left { display: flex; align-items: center; gap: 8px; } [data-page="word"] .ai-icon-ring { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 11px; } [data-page="word"] .ai-title { font-size: 13px; font-weight: 600; } [data-page="word"] .ai-header-right { display: flex; align-items: center; gap: 6px; } /* .ai-clear-btn — layout only; appearance via shared .skuo .skuo-accent */ [data-page="word"] .ai-clear-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; font-size: 11px; } /* messages */ [data-page="word"] #ai-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } [data-page="word"] .ai-welcome { text-align: center; padding: 32px 16px 16px; } [data-page="word"] .ai-welcome-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(201, 100, 120, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--accent); font-size: 16px; } [data-page="word"] .ai-welcome h4 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; } [data-page="word"] .ai-welcome p { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.55; } [data-page="word"] .msg-user { display: flex; justify-content: flex-end; } [data-page="word"] .msg-user-bubble { max-width: 88%; background: var(--accent); color: white; border-radius: 16px 16px 4px 16px; padding: 8px 12px; font-size: 13px; line-height: 1.5; word-break: break-word; } [data-page="word"] .msg-ai { display: flex; flex-direction: column; gap: 5px; } [data-page="word"] .msg-ai-bubble { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 4px 16px 16px 16px; padding: 9px 12px; font-size: 13px; line-height: 1.65; color: var(--text-primary); word-break: break-word; white-space: pre-wrap; } .dark [data-page="word"] .msg-ai-bubble { background: rgba(255, 255, 255, 0.03); } [data-page="word"] .msg-insert-btn { align-self: flex-start; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px; font-family: inherit; transition: background 0.15s; } [data-page="word"] .msg-insert-btn:hover { background: rgba(201, 100, 120, 0.08); } /* quick actions */ [data-page="word"] .ai-quick-actions { padding: 9px 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; } /* .qa-chip removed — uses shared .skuo .skuo-pill */ /* input area */ [data-page="word"] .ai-input-area { padding: 11px 12px; border-top: 1px solid var(--border); flex-shrink: 0; } [data-page="word"] .ai-input-wrap { display: flex; align-items: flex-end; gap: 7px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 14px; padding: 7px 7px 7px 12px; transition: border-color 0.2s; } [data-page="word"] .ai-input-wrap:focus-within { border-color: var(--accent); } [data-page="word"] #ai-input { flex: 1; background: transparent; border: none; outline: none; resize: none; font-size: 13px; font-family: 'Satoshi', 'Inter', sans-serif; color: var(--text-primary); line-height: 1.5; max-height: 100px; overflow-y: auto; } [data-page="word"] #ai-input::placeholder { color: var(--text-tertiary); } [data-page="word"] #ai-send-btn { width: 29px; height: 29px; border-radius: 8px; background: var(--accent); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; transition: opacity 0.15s; } [data-page="word"] #ai-send-btn:hover { opacity: 0.85; } [data-page="word"] #ai-send-btn:disabled { opacity: 0.35; cursor: not-allowed; } [data-page="word"] .ai-disclaimer { font-size: 10px; color: var(--text-tertiary); text-align: center; margin: 6px 0 0; line-height: 1.4; } /* ── Status bar ──────────────────────────────────────────── */ [data-page="word"] .ow-status { height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-top: 1px solid var(--border); background: var(--bg-elevated); font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; z-index: 90; } [data-page="word"] .ow-status .dot { color: var(--border-strong); } /* ── Thinking animation ──────────────────────────────────── */ @keyframes pulse-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); } 40% { opacity: 1; transform: scale(1); } } [data-page="word"] .thinking-dots { display: inline-flex; align-items: center; gap: 3px; } [data-page="word"] .thinking-dots span { display: inline-block; width: 5px; height: 5px; background: var(--text-tertiary); border-radius: 50%; animation: pulse-dot 1.4s infinite ease-in-out; } [data-page="word"] .thinking-dots span:nth-child(2) { animation-delay: 0.2s; } [data-page="word"] .thinking-dots span:nth-child(3) { animation-delay: 0.4s; } /* ── Export menu ─────────────────────────────────────────── */ [data-page="word"] #export-menu { display: none; position: fixed; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 5px; z-index: 500; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); min-width: 170px; } /* .export-item — row layout only; appearance via shared .skuo */ [data-page="word"] .export-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; text-align: left; cursor: pointer; font-size: 13px; border-radius: 6px; font-family: inherit; } [data-page="word"] .export-item i { color: var(--accent); width: 14px; text-align: center; } /* ── Toast ───────────────────────────────────────────────── */ [data-page="word"] #ow-toast { position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%); background: var(--surface-dark); color: var(--bg-elevated); padding: 7px 16px; border-radius: 20px; font-size: 12px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; } /* ── Mobile FAB & close ─────────────────────────────────── */ /* .ai-mobile-close — layout only; appearance via shared .skuo .skuo-icon .skuo-accent */ [data-page="word"] .ai-mobile-close { display: none; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; font-size: 13px; } [data-page="word"] #ai-fab { display: none; position: fixed; bottom: 40px; right: 16px; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: white; border: none; cursor: pointer; font-size: 19px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); z-index: 300; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; } [data-page="word"] #ai-fab.hidden { opacity: 0; transform: scale(0.75); pointer-events: none; } @media (max-width: 768px) { [data-page="word"] .ai-mobile-close { display: flex; } [data-page="word"] #ai-fab { display: flex; } } /* ── Print ───────────────────────────────────────────────── */ @media print { [data-page="word"] .ow-header, [data-page="word"] .ow-toolbar, [data-page="word"] .ow-status, [data-page="word"] #ai-panel, [data-page="word"] #ow-toast, [data-page="word"] #export-menu { display: none !important; } html:has(> body[data-page="word"]), [data-page="word"] { overflow: visible !important; height: auto !important; } [data-page="word"] #app { height: auto !important; } [data-page="word"] .ow-main { overflow: visible !important; height: auto !important; } [data-page="word"] .doc-scroll { overflow: visible !important; padding: 0 !important; } [data-page="word"] .editor-paper { box-shadow: none !important; min-height: auto !important; border: none !important; } } /* ── Scrollbars ──────────────────────────────────────────── */ [data-page="word"] ::-webkit-scrollbar { width: 5px; height: 5px; } [data-page="word"] ::-webkit-scrollbar-track { background: transparent; } [data-page="word"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }