npm - @dstally/vue - Versions diffs - 1.0.0 - Mend

@dstally/vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,47 @@
+# @dstally/vue
+Vue 3 components for Tally, built only on `@dstally/tokens` variables.
+```sh
+pnpm add @dstally/vue @dstally/tokens vue
+```
+```vue
+<script setup lang="ts">
+import { TButton, TTimerPill, TIcon } from '@dstally/vue'
+</script>
+<template>
+  <TButton size="xl"><template #iconLeft><TIcon name="download" :size="17" /></template>Download for macOS</TButton>
+  <TTimerPill project="Acme rebrand" task="Logo exploration" :seconds="8047" running :parallel-count="3" />
+</template>
+```
+Importing anything from `@dstally/vue` also loads `@dstally/tokens/styles.css`; no separate CSS import needed. Dark is default — put `data-theme="light"` on `<html>` for light.
+## Components
+| | Purpose |
+|---|---|
+| `TButton` | primary (amber, one per view) · secondary (blue) · outline · ghost · danger; sm/md/lg/xl |
+| `TIconButton` | square icon control; `label` required |
+| `TInput` `TSelect` `TCheckbox` `TSwitch` `TSegmentedControl` | forms; all `v-model` |
+| `TIcon` | Lucide glyph via CSS mask, follows `currentColor` |
+| `TCard` `TBadge` `TTag` `TTooltip` `TDialog` `TProgressBar` | surfaces and feedback |
+| `TLogo` | the mark, correct artwork per size |
+| `TDurationText` | every duration; mono + tabular |
+| `TProjectDot` `TProjectRow` | project identity and the 38px list line |
+| `TTimerPill` | the floating always-visible timer |
+| `TWaterfallTimeline` | parallel-time visualisation for reports |
+Also exported: `formatDuration(seconds, 'clock' | 'short' | 'compact')`, `PROJECT_COLORS`.
+## Rules
+- `TBadge tone="soon"` with the words "Coming soon" on every roadmap item.
+- Amber = running, blue = selected. Never both on one element.
+- Project colours come from `PROJECT_COLORS` (Okabe-Ito). Nothing else.
+## Develop
+`pnpm dev` opens the playground with every component and state, and a dark/light switch.

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,539 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: (e: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+variant: "primary" | "secondary" | "outline" | "ghost" | "danger";
+size: "sm" | "md" | "lg" | "xl";
+disabled: boolean;
+fullWidth: boolean;
+type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: (e: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+variant: "ghost" | "outline";
+size: "sm" | "md" | "lg";
+disabled: boolean;
+active: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (v: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
+"onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {
+size: "sm" | "md" | "lg";
+disabled: boolean;
+type: string;
+mono: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+declare const __VLS_component_4: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
+padding: number;
+interactive: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_5: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+tone: "neutral" | "running" | "success" | "danger" | "info" | "soon";
+dot: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const __VLS_component_6: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+remove: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{
+onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const __VLS_component_7: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
+side: "top" | "bottom" | "left" | "right";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const __VLS_component_8: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+close: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{
+onClose?: (() => any) | undefined;
+}>, {
+width: number;
+teleport: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare type __VLS_Props = {
+    /** Only one primary per view. */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    fullWidth?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+};
+/** Status pill. tone="soon" is mandatory on every roadmap item. */
+declare type __VLS_Props_10 = {
+    tone?: 'neutral' | 'running' | 'success' | 'danger' | 'info' | 'soon';
+    /** Leading dot — pair with running so state is never colour-only. */
+    dot?: boolean;
+};
+/** Task / client / label chip. 6px radius so it never reads as a status badge. */
+declare type __VLS_Props_11 = {
+    /** Okabe-Ito token, e.g. var(--chart-2). */
+    color?: string;
+    removable?: boolean;
+};
+declare type __VLS_Props_12 = {
+    content: string;
+    /** e.g. ⌘N — mono, muted, at the end. */
+    shortcut?: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+};
+/** Centred modal over a blurred scrim. Teleports to body by default; set teleport=false to host inside a positioned frame. */
+declare type __VLS_Props_13 = {
+    open: boolean;
+    title?: string;
+    description?: string;
+    width?: number;
+    teleport?: boolean;
+};
+declare type __VLS_Props_14 = {
+    value?: number;
+    max?: number;
+    /** Okabe-Ito --chart-* when the bar stands for a project. */
+    color?: string;
+    label?: string;
+    height?: number;
+};
+/** The Tally mark from shipped artwork. Below 64px it swaps to the three-upright small-size PNGs. */
+declare type __VLS_Props_15 = {
+    size?: number;
+    wordmark?: boolean;
+};
+/** Every duration in Tally. Mono, tabular, so ticking digits never shift layout. */
+declare type __VLS_Props_16 = {
+    seconds?: number;
+    format?: DurationFormat;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    tone?: 'default' | 'running' | 'muted';
+};
+/** A project's colour identity. Okabe-Ito only. Never carries meaning alone. */
+declare type __VLS_Props_17 = {
+    color?: string;
+    size?: number;
+    running?: boolean;
+};
+/** 38px list line with inline start/stop. Running = amber halo + the word + a stop button. Selected = blue. */
+declare type __VLS_Props_18 = {
+    project: string;
+    task?: string;
+    color?: string;
+    seconds?: number;
+    running?: boolean;
+    selected?: boolean;
+};
+/** The floating always-visible timer — Tally's signature object. Amber border + glow while running. */
+declare type __VLS_Props_19 = {
+    project: string;
+    task?: string;
+    color?: string;
+    seconds?: number;
+    running?: boolean;
+    /** Total timers running; >1 shows a +n chip. */
+    parallelCount?: number;
+    /** 34px variant for menu bars. */
+    compact?: boolean;
+    expandable?: boolean;
+};
+declare type __VLS_Props_2 = {
+    /** Accessible name and tooltip. Required. */
+    label: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'ghost' | 'outline';
+    /** Toggled-on: blue selected wash. Never use for "running". */
+    active?: boolean;
+    disabled?: boolean;
+};
+/** Parallel-time waterfall: one row per project, overlaps visible. shared segments render at 55% with a dashed edge. */
+declare type __VLS_Props_20 = {
+    rows: WaterfallRow[];
+    startHour?: number;
+    endHour?: number;
+    rowHeight?: number;
+    showAxis?: boolean;
+    labelWidth?: number;
+};
+declare type __VLS_Props_3 = {
+    modelValue?: string | number;
+    label?: string;
+    hint?: string;
+    /** Replaces hint and turns the field red. */
+    error?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Mono + tabular. Required for durations, times, rates. */
+    mono?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    type?: string;
+};
+declare type __VLS_Props_4 = {
+    modelValue?: string;
+    options: SelectOption[];
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+};
+declare type __VLS_Props_5 = {
+    modelValue?: boolean;
+    label: string;
+    description?: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+};
+declare type __VLS_Props_6 = {
+    modelValue?: boolean;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+declare type __VLS_Props_7 = {
+    modelValue: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    size?: 'sm' | 'md';
+};
+/**
+ * Lucide glyph painted with a CSS mask so it follows currentColor.
+ * SUBSTITUTION: Tally has no icon set of its own yet; Lucide is the closest match to the mark.
+ */
+declare type __VLS_Props_8 = {
+    /** Lucide kebab-case name: play, pause, square, layers, file-text… */
+    name: string;
+    /** 16 in the app, 20 in the site header, 24 in marketing rows. */
+    size?: number;
+    color?: string;
+    /** Override the CDN base if you self-host lucide-static. */
+    base?: string;
+};
+/** Surface + hairline + 12px radius. No shadow on dark unless it genuinely floats. */
+declare type __VLS_Props_9 = {
+    title?: string;
+    subtitle?: string;
+    /** Body padding px. 16 default; 12 in dense app panels. */
+    padding?: number;
+    interactive?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        iconLeft?(_: {}): any;
+        default?(_: {}): any;
+        iconRight?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        prefix?(_: {}): any;
+        suffix?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+declare function __VLS_template_4(): {
+    attrs: Partial<{}>;
+    slots: {
+        actions?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+declare function __VLS_template_8(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+declare type __VLS_WithTemplateSlots_8<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+export declare type DurationFormat = 'clock' | 'short' | 'compact';
+/** 8047 → "2:14:07" (clock) · "2:14" (short) · "2h 14m" (compact) */
+export declare function formatDuration(seconds: number, format?: DurationFormat): string;
+/** Okabe-Ito, the only palette permitted for projects and charts. */
+export declare const PROJECT_COLORS: string[];
+export declare interface SelectOption {
+    value: string;
+    label: string;
+}
+export declare const TBadge: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const TButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export declare const TCard: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const TCheckbox: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (v: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
+"onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+disabled: boolean;
+modelValue: boolean;
+indeterminate: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export declare const TDialog: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+export declare const TDurationText: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{}>, {
+size: "sm" | "md" | "lg" | "xl";
+tone: "default" | "running" | "muted";
+seconds: number;
+format: DurationFormat;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export declare const TIcon: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
+size: number;
+base: string;
+color: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export declare const TIconButton: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+export declare const TInput: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const TLogo: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{}>, {
+size: number;
+wordmark: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export declare const TProgressBar: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {
+height: number;
+color: string;
+value: number;
+max: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const TProjectDot: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{}>, {
+size: number;
+color: string;
+running: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export declare const TProjectRow: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+select: () => any;
+start: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{
+onSelect?: (() => any) | undefined;
+onStart?: (() => any) | undefined;
+}>, {
+color: string;
+running: boolean;
+seconds: number;
+selected: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const TSegmentedControl: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (v: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{
+"onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {
+size: "sm" | "md";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const TSelect: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (v: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
+"onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {
+size: "sm" | "md" | "lg";
+disabled: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export declare const TSwitch: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (v: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{
+"onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+disabled: boolean;
+modelValue: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export declare const TTag: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const TTimerPill: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+stop: () => any;
+toggle: () => any;
+expand: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{
+onStop?: (() => any) | undefined;
+onToggle?: (() => any) | undefined;
+onExpand?: (() => any) | undefined;
+}>, {
+color: string;
+running: boolean;
+compact: boolean;
+seconds: number;
+parallelCount: number;
+expandable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const TTooltip: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+export declare const TWaterfallTimeline: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{}>, {
+startHour: number;
+endHour: number;
+rowHeight: number;
+showAxis: boolean;
+labelWidth: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare interface WaterfallRow {
+    label: string;
+    color: string;
+    segments: WaterfallSegment[];
+}
+export declare interface WaterfallSegment {
+    start: number;
+    end: number;
+    shared?: boolean;
+}
+export { }

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ @import"https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--font-sans:"Instrument Sans","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--font-display:var(--font-sans);--font-ui:var(--font-sans);--font-numeric:var(--font-mono)}:root{--indigo-100:#E4E7FA;--indigo-200:#C3C8F3;--indigo-300:#9AA2EA;--indigo-400:#6C77DE;--indigo-500:#4A57D2;--indigo-600:#3A44AF;--indigo-700:#2C3391;--indigo-800:#1F2470;--indigo-900:#151A54;--indigo-950:#0E1138;--amber-200:#FDE3B4;--amber-300:#FBCC7C;--amber-400:#F8B547;--amber-500:#F5A524;--amber-600:#D98C10;--amber-700:#A96A08;--blue-300:#7FB4EE;--blue-400:#3D8BDB;--blue-500:#1565C0;--blue-600:#0F4E97;--blue-700:#0B3A70;--neutral-0:#FFFFFF;--neutral-25:#FAFBFD;--neutral-50:#F4F6FA;--neutral-100:#E8EBF2;--neutral-200:#D5DAE6;--neutral-300:#B3BAC9;--neutral-400:#8B93A5;--neutral-500:#697084;--neutral-600:#4C5365;--neutral-650:#3C4356;--neutral-700:#2B3143;--neutral-800:#1D2230;--neutral-850:#161A26;--neutral-900:#10131C;--neutral-950:#0A0C13;--chart-1:#0072B2;--chart-2:#E69F00;--chart-3:#009E73;--chart-4:#CC79A7;--chart-5:#56B4E9;--chart-6:#D55E00;--chart-7:#F0E442;--chart-8:#4C5566;--gradient-brand:linear-gradient(160deg,#4A57D2 0%,#2C3391 52%,#151A54 100%);--gradient-brand-lift:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 46%);--gradient-page:radial-gradient(120% 80% at 50% -10%,#1F2470 0%,#10131C 62%);--surface-page:var(--neutral-900);--surface-sunken:var(--neutral-950);--surface-card:var(--neutral-850);--surface-raised:var(--neutral-800);--surface-overlay:rgba(16,19,28,.72);--surface-inset:rgba(255,255,255,.04);--surface-hover:rgba(255,255,255,.06);--surface-active:rgba(255,255,255,.1);--surface-brand:var(--indigo-900);--surface-brand-subtle:rgba(74,87,210,.16);--surface-accent-subtle:rgba(245,165,36,.14);--text-strong:var(--neutral-0);--text-body:#DCE1EC;--text-muted:var(--neutral-300);--text-subtle:var(--neutral-400);--text-inverse:var(--neutral-900);--text-accent:var(--amber-400);--text-link:var(--blue-300);--text-link-hover:var(--amber-400);--text-on-brand:var(--neutral-0);--border-subtle:rgba(255,255,255,.08);--border-default:rgba(255,255,255,.14);--border-strong:rgba(255,255,255,.24);--border-accent:var(--amber-500);--border-focus:var(--amber-400);--action-primary:var(--amber-500);--action-primary-hover:var(--amber-400);--action-primary-active:var(--amber-600);--action-primary-text:#20160A;--action-secondary:var(--blue-500);--action-secondary-hover:var(--blue-400);--action-secondary-active:var(--blue-600);--action-secondary-text:var(--neutral-0);--status-running:var(--amber-500);--status-paused:var(--neutral-400);--status-success:#00B383;--status-warning:var(--amber-500);--status-danger:#E8663A;--status-info:#3D9BE0;--status-success-surface:rgba(0,158,115,.16);--status-warning-surface:rgba(245,165,36,.16);--status-danger-surface:rgba(213,94,0,.18);--status-info-surface:rgba(0,114,178,.18)}[data-theme=light]{--surface-page:var(--neutral-25);--surface-sunken:var(--neutral-50);--surface-card:var(--neutral-0);--surface-raised:var(--neutral-0);--surface-overlay:rgba(16,19,28,.4);--surface-inset:var(--neutral-50);--surface-hover:rgba(21,26,84,.05);--surface-active:rgba(21,26,84,.09);--surface-brand:var(--indigo-500);--surface-brand-subtle:rgba(74,87,210,.08);--surface-accent-subtle:rgba(245,165,36,.16);--text-strong:var(--neutral-900);--text-body:var(--neutral-800);--text-muted:var(--neutral-500);--text-subtle:var(--neutral-400);--text-inverse:var(--neutral-0);--text-accent:var(--amber-700);--text-link:var(--blue-500);--text-link-hover:var(--indigo-700);--text-on-brand:var(--neutral-0);--border-subtle:var(--neutral-100);--border-default:var(--neutral-200);--border-strong:var(--neutral-300);--action-primary:var(--amber-500);--action-primary-hover:var(--amber-400);--action-primary-active:var(--amber-600);--action-primary-text:#20160A;--status-success:#007A5A;--status-warning:var(--amber-700);--status-danger:#C24A12;--status-info:var(--blue-500);--chart-8:#000000}:root{--text-display-1:64px;--leading-display-1:1.02;--tracking-display-1:-.03em;--text-display-2:48px;--leading-display-2:1.06;--tracking-display-2:-.025em;--text-title-1:34px;--leading-title-1:1.14;--tracking-title-1:-.02em;--text-title-2:26px;--leading-title-2:1.2;--tracking-title-2:-.015em;--text-title-3:20px;--leading-title-3:1.3;--tracking-title-3:-.01em;--text-body-lg:18px;--leading-body-lg:1.6;--tracking-body-lg:-.005em;--text-body:16px;--leading-body:1.6;--tracking-body:0em;--text-body-sm:14px;--leading-body-sm:1.55;--tracking-body-sm:0em;--text-caption:12px;--leading-caption:1.4;--tracking-caption:.005em;--text-overline:11px;--leading-overline:1.2;--tracking-overline:.12em;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-timer-xl:44px;--text-timer-lg:28px;--text-timer-md:18px;--text-timer-sm:13px;--numeric-features:"tnum" 1,"cv01" 1}:root{--space-0:0px;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:112px;--space-14:160px;--section-y:112px;--section-y-tight:72px;--container-max:1160px;--container-prose:660px;--gutter:24px;--control-h-sm:26px;--control-h-md:32px;--control-h-lg:40px;--control-h-xl:48px;--row-h:38px}:root{--radius-xs:4px;--radius-sm:6px;--radius-md:9px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:22px;--radius-pill:999px;--radius-icon-ratio:22%;--shadow-none:none;--shadow-xs:0 1px 2px rgba(6,8,16,.32);--shadow-sm:0 1px 3px rgba(6,8,16,.36),0 1px 1px rgba(6,8,16,.24);--shadow-md:0 6px 16px -4px rgba(6,8,16,.44),0 2px 4px rgba(6,8,16,.28);--shadow-lg:0 18px 40px -12px rgba(6,8,16,.55),0 4px 10px rgba(6,8,16,.3);--shadow-pill:0 10px 30px -8px rgba(6,8,16,.6),0 0 0 1px rgba(255,255,255,.08) inset;--shadow-focus:0 0 0 3px rgba(245,165,36,.34);--shadow-inset-hairline:inset 0 1px 0 rgba(255,255,255,.06);--glow-amber:0 0 0 1px rgba(245,165,36,.5),0 0 24px -6px rgba(245,165,36,.45);--blur-panel:saturate(140%) blur(20px);--blur-scrim:blur(6px);--scrim-bottom:linear-gradient(180deg,rgba(10,12,19,0) 0%,rgba(10,12,19,.82) 100%)}:root{--duration-instant:80ms;--duration-fast:.14s;--duration-base:.2s;--duration-slow:.32s;--duration-enter:.42s;--ease-standard:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-tick:steps(1,end);--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);--press-scale:.985}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-enter:0ms;--press-scale:1}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:var(--weight-semibold);text-wrap:balance}h1{font-size:var(--text-display-2);line-height:var(--leading-display-2);letter-spacing:var(--tracking-display-2)}h2{font-size:var(--text-title-1);line-height:var(--leading-title-1);letter-spacing:var(--tracking-title-1)}h3{font-size:var(--text-title-2);line-height:var(--leading-title-2);letter-spacing:var(--tracking-title-2)}h4{font-size:var(--text-title-3);line-height:var(--leading-title-3);letter-spacing:var(--tracking-title-3)}p{margin:0 0 var(--space-5);text-wrap:pretty;max-width:var(--container-prose)}a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}a:hover{color:var(--text-link-hover)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}small{font-size:var(--text-caption);line-height:var(--leading-caption)}code,kbd,samp,pre{font-family:var(--font-mono);font-size:.92em}hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-8) 0}::selection{background:#f5a52447;color:var(--text-strong)}.tally-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--numeric-features)}.tally-overline{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-muted)}.tally-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}