{suggestion.greeting[0]} {name} {suggestion.greeting[1]} {leavingGreeting && ( )}

{ if (event.target === event.currentTarget) settle(); }} > {[0, 1, 2].flatMap((copy) => SUGGESTIONS.map((item, index) => { const at = copy * N + index; const real = copy === 1; return ( ); }), )}

{ event.preventDefault(); if (!text.trim()) return; onSend?.(text.trim()); setText(''); showToast({ message: 'Session started', icon: 'mark' }); }} >

setText(event.target.value)}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter' && !event.shiftKey) {
                        event.preventDefault();
                        event.currentTarget.form?.requestSubmit();
                      }
                    }}
                  />
                  {!text && (
                    <span key={suggestion.id} className={styles.placeholder} aria-hidden="true">
                      {suggestion.placeholder}
                    </span>
                  )}
                  <div className={styles.tools}>
                    <button type="button" className={styles.tool}>
                      <Icon name="clip" className={styles.icon14} />
                      Files
                    </button>
                    <button type="button" className={styles.tool}>
                      <Icon name="plug" className={styles.icon14} />
                      Integrations
                    </button>
                    <button type="button" className={styles.tool}>
                      <RoutineTile className={styles.icon14} />
                      Routines
                    </button>
                    <button
                      type={text.trim() ? 'submit' : 'button'}
                      className={styles.send}
                      aria-label={text.trim() ? 'Send' : 'Dictate'}
                    >
                      <Icon name={text.trim() ? 'arrow-up' : 'mic'} className={styles.icon14} />
                    </button>
                  </div>
                </div>
                <button type="button" className={styles.tray}>
                  <span>Connect your apps for better answers</span>
                  <AppMarks className={styles.apps} />
                </button>
              </form>
            </section>

<section className={styles.today} aria-labelledby="tc-date">
              <h2 className={styles.date} id="tc-date" data-part="date">
                <span>{DATE_LABEL}</span>
              </h2>
              <div className={styles.grid} data-part="cards">
                {card(
                  'meetings',
                  'Upcoming meetings',
                  standardActions('meetings', 'meeting'),
                  <ul className={styles.rows}>
                    {MEETINGS.slice(0, 3).map((meeting) => (
                      <li key={meeting.id} className={styles.rowItem}>
                        <button
                          type="button"
                          className={styles.row}
                          data-row={meeting.id}
                          data-hover={hovered === meeting.id || undefined}
                          onClick={() =>
                            showToast({ message: `Joining ${meeting.title}`, icon: 'mark' })
                          }
                        >
                          <DayTile day={meeting.day} live className={styles.day} />
                          <span className={styles.rowLabel}>{meeting.title}</span>
                          <span className={styles.rowValue} data-tone="live">
                            {minutes(meeting)}
                          </span>
                          <span className={styles.rowHint} aria-hidden="true">
                            Join meeting <Icon name="arrow-right" className={styles.icon12} />
                          </span>
                        </button>
                      </li>
                    ))}
                  </ul>,
                )}
                {card(
                  'tasks',
                  'Tasks due',
                  standardActions('tasks', 'task'),
                  <ul ref={taskList} className={styles.rows}>
                    {shownTasks.map((task) => {
                      const ticked = done.includes(task.id);
                      return (
                        <li
                          key={task.id}
                          className={styles.rowItem}
                          data-task={task.id}
                          data-row={task.id}
                          data-hover={hovered === task.id || undefined}
                          data-done={ticked || undefined}
                          data-leaving={leaving.includes(task.id) || undefined}
                        >
                          <div className={styles.row} data-kind="task">
                            <button
                              type="button"
                              role="checkbox"
                              aria-checked={ticked}
                              aria-label={`Done: ${task.title}`}
                              className={styles.check}
                              data-part="check"
                              onClick={() => tick(task.id)}
                            >
                              <Icon name="check" className={styles.icon12} />
                            </button>
                            <button
                              type="button"
                              className={styles.taskOpen}
                              onClick={() =>
                                showToast({ message: `Opening “${task.title}”`, icon: 'mark' })
                              }
                            >
                              <span className={styles.rowLabel}>{task.title}</span>
                              <span
                                className={styles.rowValue}
                                data-tone={task.late && !ticked ? 'late' : undefined}
                              >
                                {task.due}
                              </span>
                              <span className={styles.rowHint} aria-hidden="true">
                                Open task <Icon name="arrow-right" className={styles.icon12} />
                              </span>
                            </button>
                          </div>
                        </li>
                      );
                    })}
                    {!shownTasks.length && (
                      <li className={styles.empty}>Nothing due. Enjoy the quiet.</li>
                    )}
                  </ul>,
                )}
                {card(
                  'pipelines',
                  'Top pipelines',
                  standardActions('pipelines', 'pipeline'),
                  <ul className={styles.rows}>
                    {TOP_PIPELINES.map((id) => {
                      const pipeline = PIPELINES.find((item) => item.id === id)!;
                      const [amount, unit] = money(pipeline.value ?? 0);
                      return (
                        <li key={id} className={styles.rowItem}>
                          <button
                            type="button"
                            className={styles.row}
                            data-row={id}
                            data-hover={hovered === id || undefined}
                            onClick={() =>
                              showToast({ message: `Opening ${pipeline.name}`, icon: 'mark' })
                            }
                          >
                            <PipelineTile pipeline={pipeline} className={styles.tile} />
                            <span className={styles.rowLabel}>{pipeline.name}</span>
                            <span className={styles.rowValue}>
                              <b>{pipeline.deals}</b> <small>deals</small>
                              <span className={styles.money}>
                                <small>$</small>
                                <b>{amount}</b>
                                <small>{unit}</small>
                              </span>
                            </span>
                            <span className={styles.rowHint} aria-hidden="true">
                              Open pipeline <Icon name="arrow-right" className={styles.icon12} />
                            </span>
                          </button>
                        </li>
                      );
                    })}
                  </ul>,
                )}
                {card(
                  'performance',
                  'Recent performance',
                  <IconButton
                    tip={`Ask ${PRODUCT}`}
                    part="performance-ask"
                    hover={hovered === 'performance-ask'}
                    expanded={menu?.card === 'performance' && !menuClosing}
                    controls="tc-menu"
                    onClick={(button) => openMenu('performance', 'ask', button)}
                  >
                    <Mark className={styles.icon14} />
                  </IconButton>,
                  <ul className={styles.rows}>
                    {METRICS.map((metric) => (
                      <li key={metric.id} className={styles.rowItem}>
                        <button
                          type="button"
                          className={styles.row}
                          data-row={metric.id}
                          data-hover={hovered === metric.id || undefined}
                          onClick={() =>
                            ask(
                              `Why did my ${metric.label.toLowerCase()} move over the last 30 days?`,
                            )
                          }
                        >
                          <span className={styles.ringTile}>
                            <Ring share={metric.ring} className={styles.ring} />
                          </span>
                          <span className={styles.rowLabel}>{metric.label}</span>
                          <span className={styles.rowValue}>
                            <span className={styles.change} data-good={metric.good || undefined}>
                              {metric.up ? '↑' : '↓'} {metric.change}
                            </span>
                            <b>{metric.value}</b>
                            <small>{metric.unit === '%' ? ' %' : ` ${metric.unit}`}</small>
                          </span>
                          <span className={styles.rowHint} aria-hidden="true">
                            Ask {PRODUCT} AI <Icon name="arrow-right" className={styles.icon12} />
                          </span>
                        </button>
                      </li>
                    ))}
                  </ul>,
                )}
              </div>
            </section>

<section className={styles.routines} aria-labelledby="tc-routines" data-part="routines">
              <h2 className={styles.routinesTitle} id="tc-routines">
                Meet {PRODUCT} <b>Routines</b>
                <sup>™</sup>
              </h2>
              <p className={styles.routinesText}>
                Routines are saved tasks {PRODUCT} runs on demand, like a morning brief, meeting
                prep, or a pipeline review.
              </p>
              <ul className={styles.routineList}>
                {ROUTINES.map((routine) => (
                  <li key={routine.id} className={styles.routine}>
                    <RoutineTile className={styles.icon16} />
                    <span className={styles.routineText}>
                      <b>{routine.title}</b>
                      <span>{routine.detail}</span>
                    </span>
                    <button
                      type="button"
                      className={styles.routineRun}
                      onClick={() =>
                        showToast({
                          message: `Running ${routine.title.toLowerCase()}`,
                          icon: 'mark',
                        })
                      }
                    >
                      Run
                    </button>
                  </li>
                ))}
              </ul>
            </section>
          </div>
        </main>

{promo && (
          <aside
            className={styles.promo}
            data-part="promo"
            data-closing={promoClosing || undefined}
            aria-label="New"
          >
            <div className={styles.promoArt} aria-hidden="true">
              <Preview />
            </div>
            <button
              type="button"
              className={styles.promoClose}
              aria-label="Dismiss"
              onClick={closePromo}
            >
              <Icon name="close" className={styles.icon12} />
            </button>
            <div className={styles.promoBody}>
              <span className={styles.promoKicker}>Now available</span>
              <h2 className={styles.promoTitle}>Your day in four cards</h2>
              <ul className={styles.promoList}>
                {(
                  [
                    [
                      'calendar',
                      'Walk into your next meeting',
                      'Your next meetings sit under the composer. A call that is on joins in a click.',
                    ],
                    [
                      'checklist',
                      'Clear what needs you today',
                      'Tasks due, or what waits for your review, sit where you start. Finish one in a click.',
                    ],
                    [
                      'chart',
                      'Ask about any number',
                      'Win rate, closed won and sales cycle cover the last 30 days. Click one to ask.',
                    ],
                  ] as [IconName, string, string][]
                ).map(([icon, title, body]) => (
                  <li key={title}>
                    <Icon name={icon} className={styles.icon14} />
                    <span>
                      <b>{title}</b>
                      {body}
                    </span>
                  </li>
                ))}
              </ul>
              <div className={styles.promoFoot}>
                <button
                  ref={learnMore}
                  type="button"
                  className={styles.learnMore}
                  data-part="learn-more"
                  onClick={() => {
                    setArticleClosing(false);
                    setArticle({ focus: !demoOn.current });
                  }}
                >
                  Learn more
                  <Icon name="external" className={styles.icon12} />
                </button>
                <button
                  type="button"
                  className={styles.tryIt}
                  onClick={() => {
                    closePromo();
                    scroller.current
                      ?.querySelector<HTMLElement>('[data-part="meetings"] [data-row]')
                      ?.focus({ preventScroll: false });
                  }}
                >
                  Try it
                </button>
              </div>
            </div>
          </aside>
        )}

{palette && (
          <Palette
            key={palette.kind}
            kind={palette.kind}
            closing={paletteClosing}
            hover={demoPick.item}
            openTasks={TASKS.filter((task) => !gone.includes(task.id))}
            autoFocus={palette.focus}
            onClose={closePalette}
            onPick={(_kind, _id, label) => {
              closePalette();
              showToast({ message: `Opening ${label}`, icon: 'mark' });
            }}
          />
        )}
        {menu && (
          <Menu
            id="tc-menu"
            key={`${menu.card}-${menu.kind}`}
            items={menuItems(menu.card, menu.kind)}
            place={menu.place}
            width={menu.width}
            closing={menuClosing}
            hover={demoPick.item}
            subHover={demoPick.sub}
            autoFocus={menu.focus}
            label={menu.kind === 'ask' ? `Ask ${PRODUCT}` : 'More'}
            subSide={menu.subSide}
            onClose={closeMenu}
            onPick={(item, question) => {
              closeMenu(false);
              if (question) ask(question);
              else if (menu.kind === 'ask') ask(item);
              else
                showToast({
                  message: item === 'go' ? 'Opening the page' : 'Opening settings',
                  icon: 'mark',
                });
            }}
          />
        )}
        {menu && (
          <div
            className={styles.menuCatch}
            onPointerDown={() => closeMenu(false)}
            aria-hidden="true"
          />
        )}
        {article && (
          <Article
            closing={articleClosing}
            autoFocus={article.focus}
            sheetRef={sheet}
            onClose={closeArticle}
            preview={<Preview large />}
          />
        )}

<div className={styles.toasts} role="status" aria-live="polite">
          {oldToast && (
            <ToastView
              key={oldToast.key}
              toast={oldToast}
              leaving
              onClose={() => setOldToast(null)}
            />
          )}
          {toast && (
            <ToastView key={toast.key} toast={toast} leaving={false} onClose={dismissToast} />
          )}
        </div>
      </div>
      <div className={styles.pointerLayer} aria-hidden="true">
        <DemoPointer
          ref={pointer}
          className={styles.pointer}
          arrowClass={styles.arrow}
          handClass={styles.hand}
        />
      </div>
    </div>
  );
}

/** The rainbow's path across the top of the screen, in the sky's 1513 × 260 box. */
const AURORA =
  'M0 120 C 180 108 360 64 560 62 C 700 61 760 98 850 96 C 980 92 1110 112 1290 160 C 1390 186 1460 196 1513 198';
```

### today-cards/overlays.tsx

```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.

'use client';

import {
  useEffect,
  useId,
  useRef,
  useState,
  type KeyboardEvent,
  type ReactNode,
  type Ref,
} from 'react';
import {
  ARTICLE,
  MEETINGS,
  PIPELINES,
  TASKS,
  type Meeting,
  type Pipeline,
  type Task,
} from './data';
import { DayTile, Icon, Mark, PipelineTile, type IconName } from './icons';
import styles from './today-cards.module.css';

/*
 * What opens over the screen: the Browse palette (meetings, tasks or pipelines, with its search,
 * groups and a footer button that names what Enter does), the cards' menus with their "Ask"
 * submenu, the release note the side card links to, and the toast.
 *
 * Each is drawn at the screen's root and placed by its parent, so no card clips it. Each enters
 * by opacity, a little blur and a little scale, and leaves the same way, faster: its parent keeps
 * it mounted with data-closing for that moment.
 */

export type PaletteKind = 'meetings' | 'tasks' | 'pipelines';

type PaletteItem = {
  id: string;
  label: string;
  group: string;
  /** What the footer button says while this item is active. */
  action: string;
  lead: ReactNode;
  /** The right side: a time, a due label. */
  meta?: ReactNode;
  tone?: 'live' | 'late';
};

const liveLabel = (meeting: Meeting) =>
  meeting.inMinutes === 0
    ? 'Now'
    : meeting.inMinutes !== undefined
      ? `in ${meeting.inMinutes}m`
      : meeting.when;

const PALETTE_TITLE: Record<PaletteKind, string> = {
  meetings: 'Browse meetings',
  tasks: 'Browse tasks',
  pipelines: 'Browse pipelines',
};

/**
 * The Browse palette: a search field over grouped results. The arrow keys (or the pointer) pick
 * the active item, Enter runs it, the footer button names what that does, Escape or the back
 * arrow closes it.
 */
export function Palette({
  kind,
  closing,
  hover,
  openTasks = TASKS,
  autoFocus,
  onClose,
  onPick,
}: {
  kind: PaletteKind;
  closing: boolean;
  /** An item the demo points at. */
  hover?: string | null;
  openTasks?: Task[];
  autoFocus: boolean;
  onClose: () => void;
  onPick: (kind: PaletteKind, id: string, label: string) => void;
}) {
  const [query, setQuery] = useState('');
  const all = paletteItems(kind, openTasks);
  const words = query.trim().toLowerCase();
  const items = words ? all.filter((item) => item.label.toLowerCase().includes(words)) : all;
  const [active, setActive] = useState<string | null>(null);
  const shown = hover ?? active;
  const current = items.find((item) => item.id === shown) ?? null;
  const input = useRef<HTMLInputElement>(null);
  const listId = useId();

useEffect(() => {
    if (autoFocus) input.current?.focus({ preventScroll: true });
  }, [autoFocus]);

export type MenuItem = {
  id: string;
  label: string;
  icon?: IconName | 'mark';
  /** Items of a submenu, opened to the side. */
  sub?: string[];
};

/**
 * A card's menu: role="menu" with arrow keys, Enter, and Escape back to its button. An item
 * with `sub` opens its submenu on hover, ArrowRight or Enter; a question in either list ends
 * with an "Ask Sevenfold AI" hint on hover.
 */
export function Menu({
  id,
  items,
  place,
  width,
  closing,
  hover,
  subHover,
  autoFocus,
  label,
  subSide = 'right',
  onPick,
  onClose,
  menuRef,
}: {
  id: string;
  items: MenuItem[];
  place: { top: number; left: number };
  width?: number;
  closing: boolean;
  /** The item and submenu item the demo points at. */
  hover?: string | null;
  subHover?: string | null;
  autoFocus: boolean;
  label: string;
  /** Where the submenu opens: beside the menu, or under its item when neither side has room. */
  subSide?: 'right' | 'left' | 'below';
  onPick: (item: string, question?: string) => void;
  onClose: (refocus: boolean) => void;
  menuRef?: Ref<HTMLDivElement>;
}) {
  const [active, setActive] = useState<string | null>(null);
  const [subOpen, setSubOpen] = useState<string | null>(null);
  const [subActive, setSubActive] = useState<string | null>(null);
  const list = useRef<HTMLDivElement>(null);
  const sub = useRef<HTMLDivElement>(null);
  const shownActive = hover ?? active;
  const shownSub = hover && items.find((item) => item.id === hover)?.sub ? hover : subOpen;
  const subItems = items.find((item) => item.id === shownSub)?.sub;
  const shownSubActive = subHover ?? subActive;

useEffect(() => {
    if (!autoFocus) return;
    list.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus({ preventScroll: true });
  }, [autoFocus]);

const focusIn = (container: HTMLDivElement | null, step: number) => {
    const all = [...(container?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
    const index = all.indexOf(document.activeElement as HTMLElement);
    all[(index + step + all.length) % all.length]?.focus();
  };

const openSub = (item: MenuItem, focus: boolean) => {
    setSubOpen(item.id);
    setSubActive(null);
    if (focus)
      requestAnimationFrame(() =>
        sub.current
          ?.querySelector<HTMLElement>('[role="menuitem"]')
          ?.focus({ preventScroll: true }),
      );
  };

/** The release note: a tall sheet over a dimmed screen, scrolling on its own. */
export function Article({
  closing,
  autoFocus,
  sheetRef,
  onClose,
  preview,
}: {
  closing: boolean;
  autoFocus: boolean;
  sheetRef: Ref<HTMLDivElement>;
  onClose: () => void;
  /** The illustration: the cards, close up. */
  preview: ReactNode;
}) {
  const close = useRef<HTMLButtonElement>(null);
  const titleId = useId();
  useEffect(() => {
    if (autoFocus) close.current?.focus({ preventScroll: true });
  }, [autoFocus]);
  return (
    <>
      <div
        className={styles.scrim}
        data-closing={closing || undefined}
        onClick={onClose}
        aria-hidden="true"
      />
      <div
        ref={sheetRef}
        className={styles.article}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        data-part="article"
        data-closing={closing || undefined}
        onKeyDown={(event) => {
          if (event.key === 'Escape') {
            event.preventDefault();
            onClose();
          }
        }}
      >
        <button
          ref={close}
          type="button"
          className={styles.articleClose}
          onClick={onClose}
          aria-label="Close"
        >
          <Icon name="close" className={styles.icon14} />
        </button>
        <article className={styles.articleBody}>
          <span className={styles.articleKicker}>{ARTICLE.kicker}</span>
          <h2 className={styles.articleTitle} id={titleId}>
            {ARTICLE.title}
          </h2>
          <p className={styles.articleLede}>{ARTICLE.lede}</p>
          <div className={styles.articleByline}>
            <span className={styles.authors} aria-label="By the Sevenfold team">
              <span data-face="1" />
              <span data-face="2" />
            </span>
            <time dateTime="2026-10-13">{ARTICLE.date}</time>
          </div>
          <p className={styles.articleText}>{ARTICLE.intro}</p>
          <figure className={styles.articleFigure} aria-hidden="true">
            {preview}
          </figure>
          {ARTICLE.sections.map((section) => (
            <section key={section.title}>
              <h3 className={styles.articleHeading}>{section.title}</h3>
              <p className={styles.articleText}>{section.body}</p>
              {'points' in section && section.points && (
                <ul className={styles.articlePoints}>
                  {section.points.map((point) => (
                    <li key={point}>{point}</li>
                  ))}
                </ul>
              )}
            </section>
          ))}
        </article>
      </div>
    </>
  );
}

export type Toast = { key: number; message: string; undo?: () => void; icon?: 'check' | 'mark' };

/** The toast in the corner: a tick, its message, Undo when it can, and a close button. */
export function ToastView({
  toast,
  leaving,
  onClose,
}: {
  toast: Toast;
  leaving: boolean;
  onClose: () => void;
}) {
  return (
    <div className={styles.toast} data-leaving={leaving || undefined} data-part="toast">
      <span className={styles.toastTick} aria-hidden="true">
        {toast.icon === 'mark' ? (
          <Mark className={styles.icon14} />
        ) : (
          <Icon name="check" className={styles.icon14} />
        )}
      </span>
      <span className={styles.toastText}>{toast.message}</span>
      {toast.undo && (
        <button
          type="button"
          className={styles.toastUndo}
          onClick={toast.undo}
          tabIndex={leaving ? -1 : 0}
        >
          Undo
        </button>
      )}
      <button
        type="button"
        className={styles.toastClose}
        onClick={onClose}
        aria-label="Dismiss"
        tabIndex={leaving ? -1 : 0}
      >
        <Icon name="close" className={styles.icon12} />
      </button>
    </div>
  );
}
```

### today-cards/data.ts

```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.

/*
 * The invented workspace the screen shows: an assistant called Sevenfold, a sales team's day on
 * Tuesday 13 October, its meetings, tasks, pipelines and numbers, the composer's suggestions and
 * the release note the side card links to. Every company and person here is made up.
 */

export const PRODUCT = 'Sevenfold';
export const WORKSPACE = 'Hollowell Demo';
export const DATE_LABEL = 'Tue, Oct 13';

export type PipelineIcon = 'case' | 'branch' | 'swap' | 'people' | 'stack';

/** A pipeline's tile: a gradient square with a white glyph. */
export type Pipeline = {
  id: string;
  name: string;
  /** Two colours, top left to bottom right. */
  tint: [string, string];
  icon: PipelineIcon;
  deals?: number;
  /** In dollars. */
  value?: number;
};

export const PIPELINES: Pipeline[] = [
  {
    id: 'sales',
    name: 'Sales',
    tint: ['#f6c343', '#ee5a3b'],
    icon: 'case',
    deals: 31,
    value: 1.8e6,
  },
  {
    id: 'partnerships',
    name: 'Partnerships',
    tint: ['#f55bb7', '#b42fe0'],
    icon: 'branch',
    deals: 9,
    value: 385e3,
  },
  {
    id: 'renewals',
    name: 'Renewals',
    tint: ['#5ef08a', '#18a9a0'],
    icon: 'swap',
    deals: 31,
    value: 960e3,
  },
  { id: 'enterprise', name: 'Enterprise deals', tint: ['#56e3f0', '#2a8de8'], icon: 'case' },
  { id: 'expansion', name: 'Expansion revenue', tint: ['#c4f04a', '#2cb54a'], icon: 'case' },
  { id: 'mid-market', name: 'Mid-market', tint: ['#8fa8ff', '#6a4cf0'], icon: 'people' },
  { id: 'agency', name: 'Agency partners', tint: ['#c08bff', '#5b4de8'], icon: 'branch' },
  { id: 'recruiting', name: 'Recruiting', tint: ['#ff7ad9', '#5a5cf0'], icon: 'stack' },
];

/** The three the Top pipelines card shows: the busiest. */
export const TOP_PIPELINES = ['sales', 'renewals', 'partnerships'];

export type Meeting = {
  id: string;
  title: string;
  /** Day of the month on its calendar tile. */
  day: number;
  /** Minutes from now, for today's; a time label for later ones. */
  inMinutes?: number;
  when?: string;
  group: 'Today' | 'Tomorrow' | 'This week';
};

export const MEETINGS: Meeting[] = [
  { id: 'm1', title: 'Brightwater security review', day: 13, inMinutes: 0, group: 'Today' },
  { id: 'm2', title: 'Kestrel check-in', day: 13, inMinutes: 3, group: 'Today' },
  { id: 'm3', title: 'Oakmere pricing prep', day: 13, inMinutes: 24, group: 'Today' },
  { id: 'm4', title: 'Oakmere pricing follow-up', day: 14, when: '9:00 AM', group: 'Tomorrow' },
  { id: 'm5', title: 'Tidewell renewal sync', day: 19, when: 'Mon 9:00 AM', group: 'This week' },
];

export type Task = {
  id: string;
  title: string;
  /** What the due label says, and whether it is late. */
  due: string;
  late?: boolean;
};

/** Tasks due, soonest first; the card shows the first three still open. */
export const TASKS: Task[] = [
  { id: 't1', title: 'Send Brightwater the revised pricing', due: '3d late', late: true },
  {
    id: 't2',
    title: 'Follow up with Larchfield on the security review',
    due: '1d late',
    late: true,
  },
  { id: 't3', title: 'Prep the renewal deck for Quillon', due: 'Today' },
  { id: 't4', title: 'Draft the Pemberly renewal note', due: 'Tomorrow' },
  { id: 't5', title: 'Reset the Brightwater close date', due: 'Thu' },
];

export type Metric = {
  id: string;
  label: string;
  /** The change against the 30 days before, and whether it went the way you want. */
  change: string;
  good: boolean;
  up: boolean;
  value: string;
  unit: string;
  /** How full its ring is, 0 to 1. */
  ring: number;
};

export const METRICS: Metric[] = [
  {
    id: 'win',
    label: 'Win rate',
    change: '8 pts',
    good: true,
    up: true,
    value: '63.6',
    unit: '%',
    ring: 0.64,
  },
  {
    id: 'won',
    label: 'Deals won',
    change: '2',
    good: true,
    up: true,
    value: '7',
    unit: 'deals',
    ring: 0.7,
  },
  {
    id: 'cycle',
    label: 'Avg sales cycle',
    change: '2.8 days',
    good: true,
    up: false,
    value: '28',
    unit: 'days',
    ring: 0.35,
  },
];

/** The questions the Recent performance card offers. */
export const PERFORMANCE_QUESTIONS = [
  'Analyze my performance over the last 30 days',
  'Compare deals won and lost',
  'Break down closed won revenue by owner',
  'Show deals closed per week',
  'Compare the last 30 days to the previous 30',
  'Show average sales cycle by stage',
];

/** What each card's "Ask" submenu offers. */
export const ASK = {
  meetings: ['Prepare my next meeting', 'What meetings are today?', 'Recap my last meeting'],
  tasks: ['What should I do first?', 'Which tasks are overdue?', 'Plan my afternoon'],
  pipelines: ['Summarize my pipelines', 'Which deals are at risk?', 'What changed in my deals?'],
};

/**
 * The composer's suggestions. Picking one changes the greeting (its words, with the name at the
 * start or the end) and the composer's placeholder.
 */
export type Suggestion = {
  id: string;
  label: string;
  icon: ChipIcon;
  /** The greeting around the name: [before, after]. */
  greeting: [string, string];
  placeholder: string;
};

export const SUGGESTIONS: Suggestion[] = [
  {
    id: 'apps',
    label: 'Connect your apps',
    icon: 'apps',
    greeting: ['Connect your apps,', ''],
    placeholder: 'Which apps can I connect for better answers?',
  },
  {
    id: 'csv',
    label: 'Import a CSV',
    icon: 'csv',
    greeting: ['Hand me a spreadsheet,', ''],
    placeholder: 'Import the deals in this CSV',
  },
  {
    id: 'deal',
    label: 'Ask about a deal',
    icon: 'deal',
    greeting: ['Ask me about a deal,', ''],
    placeholder: 'Catch me up on my most active deals',
  },
  {
    id: 'follow',
    label: 'Draft a follow-up',
    icon: 'follow',
    greeting: ['', ', I can draft follow-ups'],
    placeholder: 'Draft a follow-up for my last meeting',
  },
  {
    id: 'recap',
    label: 'Recap a meeting',
    icon: 'recap',
    greeting: ['', ', want a recap?'],
    placeholder: 'Recap my last meeting',
  },
  {
    id: 'changed',
    label: 'What changed',
    icon: 'changed',
    greeting: ['Ask me what changed,', ''],
    placeholder: 'What changed across my pipeline this week?',
  },
  {
    id: 'routine',
    label: 'Run a routine',
    icon: 'routine',
    greeting: ['I can run your routines,', ''],
    placeholder: 'Run my weekly pipeline review',
  },
];

export const SESSIONS = [
  'Review: reading surface',
  'Loading states',
  'CSV import, streaming',
  'Weekly pipeline review with Dana',
  'Brightwater renewal, pricing',
];

export const ROUTINES = [
  { id: 'brief', title: 'Morning brief', detail: 'Weekdays at 8:30 AM', runs: 'Ran today' },
  { id: 'prep', title: 'Meeting prep', detail: 'An hour before each call', runs: 'Next at 11:00' },
  { id: 'review', title: 'Pipeline review', detail: 'Mondays at 9:00 AM', runs: 'Ran Monday' },
];

/** The release note the side card's "Learn more" opens. */
export const ARTICLE = {
  kicker: 'Update',
  title: 'Your day in four cards',
  lede: 'A new session now opens on your day: four cards with your next meetings, what is waiting on you, your busiest pipelines and how your numbers moved.',
  date: 'October 13, 2026',
  intro:
    'Until now, a new session began with an empty box and a question you had to bring yourself. Your calendar, your tasks and your figures each lived on a page of their own. This release puts them where you already start: under the composer, one card per question you tend to ask first, and every line in them is a click away from the thing it names.',
  sections: [
    {
      title: 'Walk into your next meeting',
      body: 'The first card holds your next three meetings, soonest first. Inside the hour a meeting counts down in minutes; once it has started it says Now, with an orange dot. While a call is on, or about to be, its row joins it in a new tab, and otherwise the row opens the meeting with its notes and recording. The plus on the card books another without leaving the page.',
    },
    {
      title: 'Clear what needs you today',
      body: 'The second card is what waits on you: the three tasks due soonest, each with a box to tick. A ticked task lingers for a moment, crossed out, with an Undo in the corner, then makes room for the next one.',
      points: [
        'Late tasks say how late, in red.',
        'Click a task to open it, or the plus to add one.',
        'Browse lists every task due this week.',
      ],
    },
    {
      title: 'Ask about any number',
      body: 'The last card reads your win rate, the deals you won and your average sales cycle over the last 30 days, each beside how far it moved against the 30 days before: green when it went your way, red when it did not. Every figure is also a question. Pick one and Sevenfold starts a session that explains the move from your own deals.',
    },
    {
      title: 'Open the pipeline that matters',
      body: 'Your three busiest pipelines sit beside the numbers, with their open deals and what they are worth. A row opens that pipeline; Browse finds any other. The card’s menu carries a few questions of its own, such as which deals are at risk, and each one opens a session already asked.',
    },
    {
      title: 'What comes next',
      body: 'There is nothing to switch on. The cards are on every new session today, filled from the meetings, tasks and deals already in your workspace, on every plan.',
    },
  ],
};

/** "$1.8M", "$960K". */
export function money(value: number): [string, string] {
  if (value >= 1e6) return [(value / 1e6).toFixed(1).replace(/\.0$/, ''), 'M'];
  return [String(Math.round(value / 1e3)), 'K'];
}
```

### today-cards/icons.tsx

```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.

import type { CSSProperties } from 'react';
import type { ChipIcon, Pipeline, PipelineIcon } from './data';

/*
 * The screen's drawings: line icons on a 16-unit grid in currentColor (their size comes from the
 * stylesheet), the assistant's seven-sided mark, the pipelines' gradient tiles, the calendar
 * tile, the progress ring and the invented app marks of the composer's tray. All decorative:
 * whatever they stand for is said in text beside them.
 */

const PATHS: Record<IconName, string> = {
  plus: 'M8 3.2v9.6M3.2 8h9.6',
  search: 'M7.2 12a4.8 4.8 0 1 0 0-9.6 4.8 4.8 0 0 0 0 9.6ZM10.6 10.6l2.9 2.9',
  panel:
    'M3.4 3h9.2c.8 0 1.4.6 1.4 1.4v7.2c0 .8-.6 1.4-1.4 1.4H3.4c-.8 0-1.4-.6-1.4-1.4V4.4C2 3.6 2.6 3 3.4 3ZM6.2 3v10',
  review: 'M3 3.5v9M5.6 5h7.6M5.6 8.2h5M5.6 11.4h3.2M11 10l2 1.6-2 1.6',
  book: 'M4 2.8h7.4c.6 0 1 .4 1 1v8.6H5c-.6 0-1 .4-1 1M4 2.8v10.6c0 .6.4 1 1 1h7.4M6.4 6h3.6',
  gear: 'M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM8 1.8v1.6M8 12.6v1.6M14.2 8h-1.6M3.4 8H1.8M12.4 3.6l-1.2 1.2M4.8 11.2l-1.2 1.2M12.4 12.4l-1.2-1.2M4.8 4.8 3.6 3.6',
  'chevron-down': 'm4.5 6.5 3.5 3.5 3.5-3.5',
  'chevron-left': 'M9.8 4.2 6 8l3.8 3.8',
  'chevron-right': 'M6.2 4.2 10 8l-3.8 3.8',
  'caret-down': 'M5 6.5h6L8 10Z',
  'caret-right': 'M6.5 5v6L10 8Z',
  pin: 'M9.6 2.6 13.4 6.4 11 7.6 9 9.6l.4 2.6-1 1-2.2-2.2L3 14.2M6.2 11 5 9.8l-1-1 1-1 2.6.4 2-2 1.2-2.4',
  more: 'M3.6 8h.01M8 8h.01M12.4 8h.01',
  clock: 'M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 4.8V8l2.2 1.4',
  clip: 'm12.8 7.6-4.9 4.9a3 3 0 0 1-4.3-4.3l5.2-5.2a2 2 0 0 1 2.9 2.9L6.6 11a1 1 0 0 1-1.5-1.4l4.6-4.6',
  plug: 'M5.6 2.4v2.8M10.4 2.4v2.8M3.8 5.2h8.4v1.6a4.2 4.2 0 0 1-8.4 0Zm4.2 5.8v2.6',
  mic: 'M8 2.2a1.8 1.8 0 0 0-1.8 1.8v3.6a1.8 1.8 0 0 0 3.6 0V4A1.8 1.8 0 0 0 8 2.2ZM4.4 7.4a3.6 3.6 0 0 0 7.2 0M8 11v2.6',
  'arrow-up': 'M8 13V3.4M4 7.2 8 3.2l4 4',
  'arrow-right': 'M3 8h9.6M8.8 4.2 12.6 8l-3.8 3.8',
  browse:
    'M2.6 4h10.8M2.6 7.4h4.2M2.6 10.8h3.2M10.6 12a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4ZM12.2 11.6l1.4 1.4',
  enter: 'M9.4 2.8h2.4c.6 0 1.2.6 1.2 1.2v8c0 .6-.6 1.2-1.2 1.2H9.4M2.8 8h7M7.2 5.4 9.8 8l-2.6 2.6',
  sliders:
    'M2.8 5h6M11.6 5h1.6M2.8 11h1.6M7.2 11h6M10.2 6.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2ZM5.8 12.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z',
  check: 'm3.4 8.4 3 3 6.2-6.6',
  close: 'm4.4 4.4 7.2 7.2M11.6 4.4l-7.2 7.2',
  external:
    'M9.4 2.8h3.8v3.8M13.2 2.8 7.6 8.4M11.8 9.2v3c0 .6-.4 1-1 1H3.8c-.6 0-1-.4-1-1V5.2c0-.6.4-1 1-1h3',
  calendar:
    'M3.6 3.6h8.8c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H3.6c-.6 0-1-.4-1-1v-8c0-.6.4-1 1-1ZM2.6 6.6h10.8M5.6 2.2v2.4M10.4 2.2v2.4M10 9.4v3.4l1.4-1 1.4 1',
  checklist: 'm2.6 4.4 1.2 1.2 2-2.2M2.6 10.4l1.2 1.2 2-2.2M8 4.6h5.4M8 10.6h5.4',
  chart: 'M2.6 2.6v10.8h10.8M4.8 10.4l2.6-3 2.2 1.8 3.2-4.2M10.6 5h2.2v2.2',
  menu: 'M2.8 4.4h10.4M2.8 8h10.4M2.8 11.6h10.4',
  dot: 'M8 9.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z',
  apps: 'M4.6 6.4a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM11.4 6.4a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM4.6 13.2a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM9.6 11.4h3.6M11.4 9.6v3.6',
  csv: 'M9.6 2.4H4.8c-.6 0-1 .4-1 1v9.2c0 .6.4 1 1 1h6.4c.6 0 1-.4 1-1V5ZM9.6 2.4V5h2.6M6.4 9.6h3.2M8 8v3.2',
  deal: 'M3.6 5.2h8.8c.6 0 1 .4 1 1v6c0 .6-.4 1-1 1H3.6c-.6 0-1-.4-1-1v-6c0-.6.4-1 1-1ZM6 5.2V4c0-.6.4-1 1-1h2c.6 0 1 .4 1 1v1.2M2.8 8h10.4M8 9.6v.01',
  follow:
    'M12.6 7V4.4c0-.6-.4-1-1-1H4.4c-.6 0-1 .4-1 1v6.2c0 .6.4 1 1 1h2.8M3.6 4.4 8 7.6l4.4-3.2M9.4 13.2l.4-1.6 3-3a1 1 0 0 1 1.4 1.4l-3 3Z',
  recap:
    'M12.4 7V4.6c0-.6-.4-1-1-1H3.6c-.6 0-1 .4-1 1v7.8c0 .6.4 1 1 1h3.6M2.6 6.6h9.8M5.6 2.2v2.4M9.6 2.2v2.4M10.8 9.2v1.8l1.2.8M11.2 14a3 3 0 1 0 0-6',
  changed: 'M3.2 8a4.8 4.8 0 1 0 1.6-3.6M3.2 3v2.4h2.4M8 5.6V8l1.6 1.2',
  routine: 'M9.8 3.2 6.2 12.8',
};

const BOX: CSSProperties = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.25,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
};

/** A line icon in currentColor; its size is its class's. */
export function Icon({ name, className }: { name: IconName; className?: string }) {
  const filled = name === 'caret-down' || name === 'caret-right';
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden="true">
      <path
        d={PATHS[name]}
        style={
          filled
            ? { fill: 'currentColor', stroke: 'none' }
            : name === 'more'
              ? { ...BOX, strokeWidth: 2 }
              : BOX
        }
      />
    </svg>
  );
}

/** The heptagon's corners, for a ring of radius `r` around (cx, cy), first corner up. */
function heptagon(cx: number, cy: number, r: number, turn = 0) {
  return Array.from({ length: 7 }, (_, i) => {
    const angle = ((i / 7) * 360 - 90 + turn) * (Math.PI / 180);
    return `${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`;
  }).join(' ');
}

/** Sevenfold's mark: a thick seven-sided ring with softened corners. */
export function Mark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 64 64" className={className} aria-hidden="true">
      <polygon
        points={heptagon(32, 32, 23.5, 8)}
        fill="none"
        stroke="currentColor"
        strokeWidth="9"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/** The faint nested heptagons behind the greeting. */
export function Rings({ className }: { className?: string }) {
  return (
    <svg viewBox="-600 -400 1200 800" className={className} aria-hidden="true">
      {[110, 230, 380, 560].map((r, i) => (
        <polygon
          key={r}
          points={heptagon(0, 0, r, 8 + i * 4)}
          fill="none"
          stroke="currentColor"
          strokeWidth="1"
          strokeDasharray={i % 2 ? '2 4' : undefined}
          vectorEffect="non-scaling-stroke"
        />
      ))}
    </svg>
  );
}

const GLYPHS: Record<PipelineIcon, string> = {
  case: 'M5 6.2h6c.5 0 .8.3.8.8v3.4c0 .5-.3.8-.8.8H5c-.5 0-.8-.3-.8-.8V7c0-.5.3-.8.8-.8ZM6.6 6.2v-.8c0-.3.2-.5.5-.5h1.8c.3 0 .5.2.5.5v.8M6.6 8.6h2.8',
  branch:
    'M8 6.4a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6ZM5.2 12.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6ZM10.8 12.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6ZM8 6.4v1.4M5.2 9.6l2.8-1.8 2.8 1.8',
  swap: 'M4.4 6.6h7M9.4 4.6l2 2-2 2M11.6 9.4h-7M6.6 7.4l-2 2 2 2',
  people: 'M8 7.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2ZM5 11.6c.4-1.6 1.6-2.4 3-2.4s2.6.8 3 2.4',
  stack: 'M8 4.2 11.8 6 8 7.8 4.2 6ZM4.2 8.2 8 10l3.8-1.8M4.2 10.2 8 12l3.8-1.8',
};

/** A pipeline's tile: its two colours as a gradient, its glyph in white. */
export function PipelineTile({ pipeline, className }: { pipeline: Pipeline; className?: string }) {
  const id = `tc-tile-${pipeline.id}`;
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden="true">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={pipeline.tint[0]} />
          <stop offset="1" stopColor={pipeline.tint[1]} />
        </linearGradient>
      </defs>
      <rect width="16" height="16" rx="4.6" fill={`url(#${id})`} />
      <path
        d={GLYPHS[pipeline.icon]}
        fill="none"
        stroke="#fff"
        strokeWidth="1.1"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/** A meeting's calendar tile: the day, with an orange dot when it is on or within the hour. */
export function DayTile({
  day,
  live,
  className,
}: {
  day: number;
  live?: boolean;
  className?: string;
}) {
  return (
    <span className={className} data-live={live || undefined} aria-hidden="true">
      {day}
    </span>
  );
}

/** A metric's ring, `share` full, in a small white tile. */
export function Ring({ share, className }: { share: number; className?: string }) {
  const r = 4.4;
  const length = 2 * Math.PI * r;
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden="true">
      <circle cx="8" cy="8" r={r} fill="none" stroke="var(--ring-track)" strokeWidth="1.4" />
      <circle
        cx="8"
        cy="8"
        r={r}
        fill="none"
        stroke="var(--ring)"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeDasharray={`${(length * share).toFixed(2)} ${length.toFixed(2)}`}
        transform="rotate(-90 8 8)"
      />
    </svg>
  );
}

/** The Routines button's tile: a warm gradient with a slash. */
export function RoutineTile({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden="true">
      <defs>
        <linearGradient id="tc-routine" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#ff9a3c" />
          <stop offset="0.55" stopColor="#f2386f" />
          <stop offset="1" stopColor="#a12cf0" />
        </linearGradient>
      </defs>
      <rect width="16" height="16" rx="4" fill="url(#tc-routine)" />
      <path d="M9.6 4.2 6.4 11.8" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

/** Eight invented app marks for the "Connect your apps" tray. */
export function AppMarks({ className }: { className?: string }) {
  const marks = [
    // A coral sunburst.
    <g key="a" stroke="#e8735a" strokeWidth="1.3" strokeLinecap="round">
      {Array.from({ length: 8 }, (_, i) => {
        const a = (i / 8) * Math.PI;
        return (
          <line
            key={i}
            x1={8 - 5.5 * Math.cos(a)}
            y1={8 - 5.5 * Math.sin(a)}
            x2={8 + 5.5 * Math.cos(a)}
            y2={8 + 5.5 * Math.sin(a)}
          />
        );
      })}
    </g>,
    // Olive rings.
    <g key="b">
      <circle cx="8" cy="8" r="6.4" fill="#c9d77a" />
      <circle cx="8" cy="8" r="3.6" fill="none" stroke="#3f6b2c" strokeWidth="1.4" />
      <circle cx="8" cy="8" r="1.2" fill="#3f6b2c" />
    </g>,
    // A framed square with two bars.
    <g key="c">
      <rect
        x="2"
        y="2"
        width="12"
        height="12"
        rx="2.4"
        fill="#fff"
        stroke="#2b2b2b"
        strokeWidth="1.3"
      />
      <path d="M5.6 5v6M10.4 5v6M5.6 5l4.8 6" stroke="#2b2b2b" strokeWidth="1.3" fill="none" />
    </g>,
    // A striped disc.
    <g key="d">
      <circle cx="8" cy="8" r="6.4" fill="#4a4a4f" />
      <path
        d="M3 6.6 9.4 13M2.6 9.8l3.6 3.6M5.4 2.8l7.8 7.8M8.8 1.8l5.4 5.4"
        stroke="#fff"
        strokeWidth="0.9"
      />
    </g>,
    // A blue envelope with a cloud.
    <g key="e">
      <rect x="1.6" y="4.4" width="9.6" height="8" rx="1.6" fill="#2f74d0" />
      <path d="m2.4 5.4 4.4 3.4 4.4-3.4" stroke="#fff" strokeWidth="1" fill="none" />
      <circle cx="11.6" cy="6" r="3" fill="#7ec3f5" />
      <circle cx="13.6" cy="8.2" r="2.2" fill="#a9d8fa" />
    </g>,
    // Four coloured petals.
    <g key="f">
      <rect x="2" y="6.6" width="5.4" height="2.8" rx="1.4" fill="#36c5a8" />
      <rect x="8.6" y="6.6" width="5.4" height="2.8" rx="1.4" fill="#e0457b" />
      <rect x="6.6" y="2" width="2.8" height="5.4" rx="1.4" fill="#ecb22e" />
      <rect x="6.6" y="8.6" width="2.8" height="5.4" rx="1.4" fill="#4b8ef0" />
    </g>,
    // A violet coin with a wave.
    <g key="g">
      <circle cx="8" cy="8" r="6.6" fill="#7a67ee" />
      <path
        d="M5 9.6c1.2-2.6 2.8 1.4 4 .2s.8-3.2 2-2.6"
        stroke="#fff"
        strokeWidth="1.4"
        fill="none"
        strokeLinecap="round"
      />
    </g>,
    // Stepped bars.
    <g key="h">
      <path d="M2 13 6 3" stroke="#f05a8c" strokeWidth="2.2" strokeLinecap="round" />
      <path d="M5.6 13 9.6 3" stroke="#f0a43a" strokeWidth="2.2" strokeLinecap="round" />
      <path d="M9.2 13h4.8l-2.4-5Z" fill="#5a63f0" />
    </g>,
  ];
  return (
    <span className={className} aria-hidden="true">
      {marks.map((mark, i) => (
        <svg key={i} viewBox="0 0 16 16">
          {mark}
        </svg>
      ))}
    </span>
  );
}
```

### today-cards/demo-pointer.tsx

```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.

'use client';

import type { CSSProperties, Ref } from 'react';

/*
 * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or
 * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends
 * the step in progress at once: its promise rejects, which ends the script right there, and the
 * pointer fades out.
 *
 * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame.
 * The points of the flight are handed to whoever wants to move along with it (nothing here
 * does, but the hook is kept). The arrow and the hand are HTML boxes
 * that swap by their visibility: a change of style inside an SVG would lay the SVG out again.
 */

export type Point = { x: number; y: number };

/** A glide's path and timing, for an animation that plays along with it. */
export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };

export type Demo = {
  /** Resolves after `ms`. */
  wait: (ms: number) => Promise<void>;
  /** Glides the pointer to `to`, in the stage's own px, in `ms`; `along` gets the flight. */
  glide: (to: Point, ms: number, along?: (flight: Flight) => void) => Promise<void>;
  /** Shows the arrow, or the hand a link shows. */
  glyph: (name: 'arrow' | 'hand') => void;
};

/** What a stopped demo's pending step rejects with. */
class Stopped extends Error {}

/** Where the arrow's tip is, as shares of its box: the point the pointer stands on. */
const TIP: Point = { x: 0.15, y: 0.1 };

/** How many points a flight is drawn through. */
const SAMPLES = 24;

/** Plays `script` with the pointer over `stage`; returns the function that stops it. */
export function runDemo(
  stage: HTMLElement,
  pointer: HTMLElement,
  script: (demo: Demo) => Promise<void>,
): () => void {
  let alive = true;
  let flight: Animation | null = null;
  // The stylesheet sizes the pointer from the stage's width; its tip is where it stands.
  const tip = { x: pointer.offsetWidth * TIP.x, y: pointer.offsetHeight * TIP.y };
  const place = ({ x, y }: Point) => `translate(${x - tip.x}px, ${y - tip.y}px)`;
  const timers = new Set<number>();
  const pending = new Set<() => void>();
  // The pointer comes in from the lower right.
  let at: Point = { x: stage.offsetWidth * 0.8, y: stage.offsetHeight * 0.9 };

/** Settles like `promise`, or rejects as soon as the demo stops. */
  const step = (promise: Promise<unknown>) =>
    new Promise<void>((resolve, reject) => {
      if (!alive) return reject(new Stopped());
      const cancel = () => reject(new Stopped());
      pending.add(cancel);
      promise.then(
        () => {
          pending.delete(cancel);
          if (alive) resolve();
        },
        () => {
          pending.delete(cancel);
          reject(new Stopped());
        },
      );
    });

const wait = (ms: number) =>
    step(
      new Promise<void>((resolve) => {
        const timer = window.setTimeout(() => {
          timers.delete(timer);
          resolve();
        }, ms);
        timers.add(timer);
      }),
    );

const glide: Demo['glide'] = (to, ms, along) => {
    const from = at;
    at = to;
    const dx = to.x - from.x;
    const dy = to.y - from.y;
    // A gentle curve, as a hand moves: the control point sits off the straight line.
    const bend = { x: (from.x + to.x) / 2 - dy * 0.18, y: (from.y + to.y) / 2 + dx * 0.18 };
    const points: Point[] = [];
    for (let i = 0; i <= SAMPLES; i += 1) {
      const t = i / SAMPLES;
      const u = 1 - t;
      points.push({
        x: u * u * from.x + 2 * u * t * bend.x + t * t * to.x,
        y: u * u * from.y + 2 * u * t * bend.y + t * t * to.y,
      });
    }
    const timing: KeyframeAnimationOptions = {
      duration: ms,
      easing: 'cubic-bezier(0.45, 0, 0.25, 1)',
    };
    flight?.cancel();
    // Where it rests once the flight is over.
    pointer.style.transform = place(to);
    flight = pointer.animate(
      points.map((point) => ({ transform: place(point) })),
      timing,
    );
    along?.({ points, timing });
    return step(flight.finished);
  };

const glyph: Demo['glyph'] = (name) => {
    pointer.dataset.glyph = name;
  };

pointer.dataset.glyph = 'arrow';
  pointer.style.transform = place(at);
  pointer.style.opacity = '1';
  script({ wait, glide, glyph }).catch((error: unknown) => {
    if (!(error instanceof Stopped)) throw error;
  });

return () => {
    if (!alive) return;
    alive = false;
    timers.forEach((timer) => window.clearTimeout(timer));
    flight?.cancel();
    pending.forEach((cancel) => cancel());
    pointer.style.opacity = '0';
  };
}

/**
 * The pointer's box: it moves, on a layer of its own. Its size comes from its class, its colours
 * from the stage's tokens (today-cards.module.css).
 */
const POINTER: CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  zIndex: 2,
  display: 'block',
  pointerEvents: 'none',
  opacity: 0,
  transition: 'opacity 0.3s ease',
  filter: 'drop-shadow(0 1px 1.5px var(--pointer-shadow))',
  willChange: 'transform',
};

/** One glyph over the other, each filling the box. */
const GLYPH: CSSProperties = { position: 'absolute', inset: 0, display: 'block' };
const DRAWING: CSSProperties = {
  display: 'block',
  width: '100%',
  height: '100%',
  overflow: 'visible',
};
/** The arrow is dark on a white edge, the hand white on a dark one, as the system draws them. */
const ARROW: CSSProperties = { fill: 'var(--pointer)', stroke: 'var(--pointer-edge)' };
const HAND: CSSProperties = { fill: 'var(--pointer-edge)', stroke: 'var(--pointer)' };

/**
 * The pointer the demo moves around: an arrow, or a pointing hand over the screen. It is
 * decorative: what it does shows on the screen itself. The stylesheet shows one glyph at a time,
 * from the box's data-glyph.
 */
export function DemoPointer({
  ref,
  className,
  arrowClass,
  handClass,
}: {
  ref: Ref<HTMLSpanElement>;
  className?: string;
  arrowClass?: string;
  handClass?: string;
}) {
  return (
    <span ref={ref} className={className} style={POINTER} aria-hidden="true">
      <span className={arrowClass} style={GLYPH}>
        <svg viewBox="0 0 20 20" style={DRAWING}>
          <path
            d="M3 2v14.5l3.6-3.3 2.6 5.6 2.4-1.1-2.6-5.5h5.2z"
            style={ARROW}
            strokeWidth="1.3"
            strokeLinejoin="round"
          />
        </svg>
      </span>
      <span className={handClass} style={GLYPH}>
        <svg viewBox="0 0 20 20" style={DRAWING}>
          {/* The tip of the finger sits where the arrow's tip is. */}
          <path
            d="M6.4 3.3c0-.8.6-1.4 1.3-1.4S9 2.5 9 3.3v5.5c.2-.5.6-.8 1.2-.8.7 0 1.2.5 1.2 1.2v.5c.2-.5.6-.8 1.2-.8.7 0 1.2.5 1.2 1.2v.7c.2-.4.6-.7 1.1-.7.7 0 1.2.5 1.2 1.2v3.5c0 2.8-1.9 4.9-4.6 4.9h-1.2c-1.8 0-3.1-.8-4.1-2.3l-2.6-3.9c-.4-.6-.2-1.3.4-1.7.6-.3 1.3-.2 1.7.4l.6.9z"
            style={HAND}
            strokeWidth="1.1"
            strokeLinejoin="round"
            transform="translate(-4.7 0.1)"
          />
        </svg>
      </span>
    </span>
  );
}
```

### today-cards/use-autoplay.ts

```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';

/*
 * When a demo may play on its own: while part of it is on screen and the tab is visible, never
 * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it
 * takes back over `idle` ms after their last input.
 */
export function useAutoplay<T extends HTMLElement>(idle = 6000) {
  const ref = useRef<T>(null);
  const [visible, setVisible] = useState(false);
  const [reduced, setReduced] = useState(true);
  const [taken, setTaken] = useState(false);
  const timer = useRef(0);

useEffect(() => {
    const element = ref.current;
    if (!element) return;
    let onScreen = false;
    const update = () => setVisible(onScreen && !document.hidden);
    const observer = new IntersectionObserver(
      ([entry]) => {
        onScreen = entry.isIntersecting;
        update();
      },
      { threshold: 0.3 },
    );
    observer.observe(element);
    document.addEventListener('visibilitychange', update);
    const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
    const readMotion = () => setReduced(motion.matches);
    readMotion();
    motion.addEventListener('change', readMotion);
    return () => {
      observer.disconnect();
      document.removeEventListener('visibilitychange', update);
      motion.removeEventListener('change', readMotion);
    };
  }, []);

const take = useCallback(() => {
    setTaken(true);
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => setTaken(false), idle);
  }, [idle]);
  useEffect(() => () => window.clearTimeout(timer.current), []);

return { ref, take, playing: visible && !reduced && !taken };
}
```

### today-cards/today-cards.module.css

```css
/* Today cards (today-cards.tsx): an assistant's new-session screen. Near-white, with a pale warm
   grey sidebar, a soft rainbow across the top, white composer and pale grey cards; orange for
   meetings on now, crimson for late tasks, green for numbers that moved the right way. At night
   near-black, the cards a step lighter, the rainbow dimmed.

Colours are the tokens below, light-dark(light, dark) where the two differ: the screen takes
   the color-scheme it inherits from the page, or the one its colorScheme prop sets
   (data-color-scheme).

Layout is by container queries on the root: a 215 px sidebar from 900 px, a drawer behind a
   menu button under that, the cards in one column under 640 px.

Memory. Only transforms, opacity and a small blur animate (menus, the palette, the toast, the
   greeting's words, the suggestions' row); the rainbow is one static SVG, blurred once. */

.root {
  --bg: #fdfcfc;
  --side: #f8f7f7;
  --side-line: #efeded;
  --ink: #1d1d1d;
  --ink-2: #3a3a3a;
  --muted: #8b8b8b;
  --muted-2: #a3a3a3;
  --faint: #bdbdbd;
  --line: #ececec;
  --hover: #efeeee;
  --nav-on: #ecebeb;
  --card: #f7f6f6;
  --card-edge: rgb(0 0 0 / 0.025);
  --row-hover: #eeeded;
  --surface: #fff;
  --surface-edge: rgb(0 0 0 / 0.07);
  --chip-edge: rgb(0 0 0 / 0.022);
  --tray: #f3f2f2;
  --tile: #fff;
  --tile-edge: #e6e5e5;
  --chip-icon: #f1f0f0;
  --live: #d4652b;
  --live-soft: #e28b5a;
  --dot: #f0702c;
  --late: #c8284d;
  --good: #2e9a57;
  --bad: #c8284d;
  --ring: #2e9a57;
  --ring-track: #e3e3e3;
  --solid: #1c1c1c;
  --solid-ink: #fff;
  --tip: #1c1c1c;
  --tip-ink: #fff;
  --scrim: rgb(24 24 24 / 0.14);
  --shadow: rgb(20 20 20 / 0.06);
  --shadow-2: rgb(20 20 20 / 0.1);
  --rings: #e7e6e6;
  --haze: rgb(0 0 0 / 0.06);
  --aurora: 1;
  --veil: transparent;
  --wash: rgb(0 0 0 / 0.045);
  --check: #1c1c1c;
  --focus: #6d8cff;
  --glow-a: #f9d8f0;
  --glow-b: #e2f4ea;
  --glow-c: #e3e6fb;
  --pointer: #1c1c1e;
  --pointer-edge: #fff;
  --pointer-shadow: rgb(0 0 0 / 0.25);

position: relative;
  container: today / inline-size;
  width: 100%;
  overflow: hidden;
  overflow: clip;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-family:
    'Library Inter',
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: -0.03em;
  font-feature-settings: 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
@supports (color: light-dark(#fff, #000)) {
  .root {
    --bg: light-dark(#fdfcfc, #111112);
    --side: light-dark(#f8f7f7, #151516);
    --side-line: light-dark(#efeded, #222224);
    --ink: light-dark(#1d1d1d, #ececee);
    --ink-2: light-dark(#3a3a3a, #cfcfd3);
    --muted: light-dark(#8b8b8b, #8e8e94);
    --muted-2: light-dark(#a3a3a3, #6f6f75);
    --faint: light-dark(#bdbdbd, #56565b);
    --line: light-dark(#ececec, #232325);
    --hover: light-dark(#efeeee, #222224);
    --nav-on: light-dark(#ecebeb, #242426);
    --card: light-dark(#f7f6f6, #19191b);
    --card-edge: light-dark(rgb(0 0 0 / 0.025), rgb(255 255 255 / 0.04));
    --row-hover: light-dark(#eeeded, #252528);
    --surface: light-dark(#fff, #1d1d20);
    --surface-edge: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.08));
    --chip-edge: light-dark(rgb(0 0 0 / 0.022), rgb(255 255 255 / 0.06));
    --tray: light-dark(#f3f2f2, #18181a);
    --tile: light-dark(#fff, #26262a);
    --tile-edge: light-dark(#e6e5e5, #333337);
    --chip-icon: light-dark(#f1f0f0, #2a2a2d);
    --live: light-dark(#d4652b, #ff9a5c);
    --live-soft: light-dark(#e28b5a, #d98557);
    --dot: light-dark(#f0702c, #ff8a45);
    --late: light-dark(#c8284d, #ff6f8e);
    --good: light-dark(#2e9a57, #5fd38b);
    --bad: light-dark(#c8284d, #ff6f8e);
    --ring: light-dark(#2e9a57, #5fd38b);
    --ring-track: light-dark(#e3e3e3, #38383c);
    --solid: light-dark(#1c1c1c, #f1f1f2);
    --solid-ink: light-dark(#fff, #151516);
    --tip: light-dark(#1c1c1c, #f1f1f2);
    --tip-ink: light-dark(#fff, #151516);
    --scrim: light-dark(rgb(24 24 24 / 0.14), rgb(0 0 0 / 0.5));
    --shadow: light-dark(rgb(20 20 20 / 0.06), rgb(0 0 0 / 0.4));
    --shadow-2: light-dark(rgb(20 20 20 / 0.1), rgb(0 0 0 / 0.55));
    --rings: light-dark(#e7e6e6, #222225);
    --veil: light-dark(transparent, rgb(17 17 18 / 0.62));
    --wash: light-dark(rgb(0 0 0 / 0.045), rgb(255 255 255 / 0.02));
    --haze: light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.25));
    --check: light-dark(#1c1c1c, #f1f1f2);
    --focus: light-dark(#6d8cff, #8ea6ff);
    --glow-a: light-dark(#f9d8f0, #3d1f37);
    --glow-b: light-dark(#e2f4ea, #15302a);
    --glow-c: light-dark(#e3e6fb, #1c2440);
  }
}
.root[data-color-scheme='light'] {
  color-scheme: light;
}
.root[data-color-scheme='dark'] {
  color-scheme: dark;
}
.root[data-color-scheme='system'] {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  .root[data-color-scheme='system'] {
    color-scheme: dark;
  }
}

:where(.root) *,
:where(.root) *::before,
:where(.root) *::after {
  box-sizing: border-box;
}
:where(.root) :is(h1, h2, h3, p, ul, figure) {
  margin: 0;
  padding: 0;
}
:where(.root) ul {
  list-style: none;
}
:where(.root) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
:where(.root) a {
  color: inherit;
  text-decoration: none;
}
.root :is(button, a, input, textarea, [role='option']):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
:where(.root) b {
  font-weight: inherit;
}
:where(.root) small {
  font-size: inherit;
}
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icon sizes: the lab forces unsized SVGs to 16 px, so every one is sized here. */
.icon12 {
  flex: none;
  width: 12px;
  height: 12px;
}
.icon14 {
  flex: none;
  width: 14px;
  height: 14px;
}
.icon16 {
  flex: none;
  width: 16px;
  height: 16px;
}
.tile {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ——— The frame ——— */

.app {
  position: relative;
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  height: 1080px;
}

/* ——— Sidebar ——— */

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 7px;
  border-right: 1px solid var(--side-line);
  background: var(--side);
  color: var(--ink-2);
}
.workspace {
  display: flex;
  align-items: center;
  height: 28px;
  gap: 1px;
}
.workspaceButton {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  gap: 9px;
  border-radius: 8px;
  color: #6b6b6b;
  color: var(--muted);
}
.workspaceButton:hover,
.sideIcon:hover {
  background: var(--hover);
}
.workspaceLogo {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
  color: var(--muted);
}
.workspaceLogo svg {
  width: 10px;
  height: 10px;
}
.workspaceName {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  white-space: nowrap;
  mask-image: linear-gradient(to left, transparent, #000 14px);
}
.sideIcon {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: var(--ink-2);
}
.nav {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 2.5px;
}
.navItem,
.sideItem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  padding: 0 7px;
  gap: 12px;
  border-radius: 8px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 0.12s ease;
}
.navItem svg,
.sideItem > svg:first-child {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ink-2);
}
.sideItem > .tile:first-child {
  width: 16px;
  height: 16px;
  margin: 0 -1px;
}
.navItem:hover,
.sideItem:hover {
  background: var(--hover);
}
.navItem[aria-current='page'] {
  background: var(--nav-on);
  color: var(--ink);
}
.sideGroup {
  display: flex;
  flex-direction: column;
  margin-top: 10.5px;
}
.sideHeading {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 24px;
  padding: 0 7px;
  gap: 6px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
}
.sideHeading:hover {
  color: var(--ink-2);
}
.caret {
  width: 10px;
  height: 10px;
  color: var(--faint);
  transition: rotate 0.15s ease;
}
.sideHeading[aria-expanded='false'] .caret {
  rotate: -90deg;
}
.sideList {
  display: flex;
  flex-direction: column;
  margin-top: 3px;
  gap: 1px;
}
.sideList[data-kind='sessions'] {
  gap: 2.5px;
}
.sideLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to left, transparent, #000 18px);
}
.sideList[data-kind='pipelines'] .sideLabel {
  mask-image: none;
}
.pin {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--muted-2);
  opacity: 0;
}
.pinned,
.sideItem:hover .pin {
  opacity: 1;
}
.sessionDot {
  display: grid;
  flex: none;
  width: 14px;
  place-items: center;
}
.sessionDot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tile-edge);
}

/* ——— Main ——— */

.main {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.topbar {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.history {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 6px;
  gap: 8px;
  border-radius: 8px;
  color: var(--ink-2);
}
.history svg:last-child {
  margin-left: -2px;
  color: var(--muted-2);
}
.history:hover,
.menuButton:hover {
  background: var(--hover);
}
.menuButton {
  display: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: var(--ink-2);
}
.scroll {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar {
  display: none;
}

/* The sky: the rainbow and the faint rings behind the greeting. */
.sky {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 560px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--wash), transparent 240px);
  pointer-events: none;
}
.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 260px;
  opacity: var(--aurora);
}
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--veil);
}
.haze {
  fill: none;
  stroke: var(--haze);
  stroke-width: 90;
}
.rings {
  position: absolute;
  top: calc(201px - 400px);
  left: calc(50% - 600px);
  width: 1200px;
  height: 800px;
  color: var(--rings);
  mask-image: radial-gradient(closest-side, #000 40%, transparent);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(690px, 100% - 32px);
  margin: 0 auto;
  padding-top: 168px;
}
.mark {
  width: 66px;
  height: 66px;
  color: var(--ink);
}
.greeting {
  position: relative;
  display: grid;
  width: 100%;
  margin-top: 15px;
  color: var(--ink);
  font-size: 31px;
  font-weight: 330;
  line-height: 44px;
  letter-spacing: -0.05em;
  text-align: center;
}
.greetingLine {
  grid-area: 1 / 1;
}
.word {
  display: inline-block;
  margin-right: 0.24em;
  animation: tc-word-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 55ms + 60ms);
}
.word:last-child {
  margin-right: 0;
}
.word[data-name] {
  color: var(--muted);
}
.wordTail {
  color: var(--ink);
}
.greetingLine[data-leaving] .word {
  animation: tc-word-out 0.18s ease-in both;
}

.chipRow {
  position: relative;
  width: 100%;
  margin-top: 26px;
}
.chipView {
  overflow: hidden;
  padding: 4px 0;
  margin: -4px 0;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 70px,
    #000 calc(100% - 70px),
    transparent
  );
}
.chipTrack {
  display: flex;
  width: max-content;
  gap: 8.5px;
  transition: transform 0.48s cubic-bezier(0.3, 0.7, 0.15, 1);
  will-change: transform;
}
.chipTrack[data-snap] {
  transition: none;
}
.chip {
  display: flex;
  flex: none;
  align-items: center;
  height: 29px;
  padding: 0 12px 0 6px;
  gap: 9px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--chip-edge),
    0 1px 4px var(--shadow);
  color: var(--muted);
  white-space: nowrap;
  transition:
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.chip:hover {
  color: var(--ink-2);
}
.chip[data-active] {
  color: var(--ink);
  box-shadow:
    0 0 0 1px light-dark(#f3dbe8, #3a2a35),
    0 0 0 3px light-dark(rgb(255 214 236 / 0.35), rgb(255 140 200 / 0.08)),
    0 2px 8px light-dark(rgb(150 230 190 / 0.25), rgb(0 0 0 / 0.3));
}
.chipIcon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: var(--chip-icon);
  color: var(--muted);
}
.chip[data-active] .chipIcon {
  color: var(--ink-2);
}
.chipArrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  place-items: center;
  border-radius: 6px;
  color: var(--muted-2);
}
.chipArrow:first-child {
  left: -42px;
}
.chipArrow:last-child {
  right: -43px;
}
.chipArrow:hover {
  background: var(--hover);
  color: var(--ink);
}

/* The composer, with its tray of apps under it. */
.composer {
  position: relative;
  width: 100%;
  margin-top: 33px;
}
.field {
  position: relative;
  z-index: 1;
  height: 113px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 2px 6px var(--shadow),
    0 8px 24px var(--shadow);
}
.input {
  display: block;
  width: 100%;
  height: 74px;
  padding: 9px 13px 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  line-height: 20px;
  letter-spacing: 0;
  resize: none;
  outline: none;
}
.input:focus-visible {
  outline: none;
}
.field:has(.input:focus-visible) {
  box-shadow:
    0 0 0 1px var(--focus),
    0 2px 6px var(--shadow),
    0 8px 24px var(--shadow);
}
.placeholder {
  position: absolute;
  top: 9px;
  left: 13px;
  color: var(--faint);
  font-size: 13.5px;
  line-height: 20px;
  letter-spacing: 0;
  pointer-events: none;
  animation: tc-blur-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}
.tools {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 9px;
  display: flex;
  align-items: center;
  height: 32px;
  gap: 12px;
}
.tool {
  display: flex;
  align-items: center;
  height: 26px;
  margin: 0 -6px;
  padding: 0 6px;
  gap: 7px;
  border-radius: 7px;
  color: var(--ink-2);
}
.tool:hover {
  background: var(--hover);
}
.tool:nth-child(3) {
  margin-left: -2px;
}
.send {
  display: grid;
  width: 32px;
  height: 32px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: var(--solid);
  color: var(--solid-ink);
  transition: transform 0.15s ease;
}
.send:active {
  transform: scale(0.94);
}
.tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 36px);
  height: 49px;
  margin: -12px auto 0;
  padding: 12px 13.5px 0;
  gap: 12px;
  border-radius: 0 0 13px 13px;
  background: var(--tray);
  color: var(--muted);
  font-size: 12.5px;
}
.tray:hover {
  color: var(--ink-2);
}
.tray > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.apps {
  display: flex;
  flex: none;
  gap: 10.5px;
}
.apps svg {
  width: 14px;
  height: 14px;
}

/* ——— The day ——— */

.today {
  position: relative;
  width: min(690px, 100% - 32px);
  margin: 0 auto;
  padding-top: 55px;
}
.date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}
.date::before,
.date::after {
  content: '';
  width: 195px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line));
}
.date::after {
  background: linear-gradient(to left, transparent, var(--line));
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 34px;
  gap: 10px 10.5px;
}
.card {
  position: relative;
  height: 135px;
  padding: 0 6px 7px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-edge);
}
.cardHead {
  display: flex;
  align-items: center;
  height: 41px;
  padding: 3px 3px 0 9px;
}
.cardTitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cardActions {
  display: flex;
  gap: 6.5px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.card:hover .cardActions,
.card[data-hover] .cardActions,
.card:focus-within .cardActions,
.cardActions:has([aria-expanded='true']) {
  opacity: 1;
}
.iconButton {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.iconButton:hover,
.iconButton[data-hover],
.iconButton[aria-expanded='true'] {
  background: var(--row-hover);
  color: var(--ink);
}
.card[data-part='performance'] .iconButton {
  color: var(--ink);
}
.tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 4;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--tip);
  color: var(--tip-ink);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 3px;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    translate 0.12s ease;
}
.iconButton:is(:hover, [data-hover], :focus-visible):not([aria-expanded='true']) .tip {
  opacity: 1;
  translate: -50% 0;
  transition-delay: 0.35s;
}
.rows {
  position: relative;
}
.rowItem {
  position: relative;
}
.row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 29px;
  padding: 0 7px 0 8px;
  gap: 10px;
  border-radius: 8px;
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.row:hover,
.row[data-hover],
.rowItem[data-hover] .row,
.rowItem:has(.taskOpen:hover) .row {
  background: var(--row-hover);
  transition-duration: 0.08s;
}
.rowLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to left, transparent, #000 22px);
}
.rowValue {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.12s ease;
}
.rowValue b {
  color: var(--ink);
}
.rowValue small {
  color: var(--muted-2);
}
.rowValue[data-tone='live'],
.rowValue[data-tone='live'] :is(b, small) {
  color: var(--live);
}
.rowValue[data-tone='live'] small {
  opacity: 0.75;
}
.rowValue[data-tone='late'] {
  color: var(--late);
}
.money {
  margin-left: 6px;
}
.money b {
  margin: 0 1px;
}
.change {
  margin-right: 7px;
  color: var(--bad);
}
.change[data-good] {
  color: var(--good);
}
.rowHint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 9px 0 34px;
  gap: 6px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--row-hover) 30px);
  color: var(--muted-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
:is(.row:hover, .row[data-hover], .rowItem[data-hover] .row, .rowItem:has(.taskOpen:hover) .row)
  .rowHint {
  opacity: 1;
}
:is(.row:hover, .row[data-hover], .rowItem[data-hover] .row, .rowItem:has(.taskOpen:hover) .row)
  .rowValue {
  opacity: 0;
}
.day {
  position: relative;
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
  color: var(--ink-2);
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.day[data-live]::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot);
}
.ringTile {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
}
.ring {
  width: 14px;
  height: 14px;
}

/* A task: its box, then its name, which opens it. */
.row[data-kind='task'] {
  padding: 0;
  gap: 0;
}
.check {
  display: grid;
  flex: none;
  width: 34px;
  height: 29px;
  padding-left: 8px;
  place-items: center start;
  border-radius: 8px 0 0 8px;
}
.check::before {
  content: '';
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.check svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 11px;
  color: var(--solid-ink);
  opacity: 0;
  scale: 0.6;
  transition:
    opacity 0.15s ease,
    scale 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.check:hover::before {
  box-shadow: inset 0 0 0 1px var(--faint);
}
.check[aria-checked='true']::before {
  background: var(--check);
  box-shadow: none;
}
.check[aria-checked='true'] svg {
  opacity: 1;
  scale: 1;
}
.taskOpen {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 29px;
  padding-right: 7px;
  gap: 10px;
  border-radius: 0 8px 8px 0;
}
.rowItem[data-done] .rowLabel {
  color: var(--muted-2);
  text-decoration: line-through;
  text-decoration-color: var(--muted-2);
}
.rowItem[data-done] .rowValue {
  color: var(--muted-2);
}
.rowItem[data-leaving] {
  opacity: 0;
  filter: blur(3px);
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}
.empty {
  padding: 6px 9px;
  color: var(--muted);
}

/* ——— Routines ——— */

.routines {
  width: min(690px, 100% - 32px);
  margin: 0 auto;
  padding: 53px 0 48px;
  text-align: center;
}
.routinesTitle {
  color: var(--ink);
  font-size: 18px;
  font-weight: 350;
  line-height: 24px;
  letter-spacing: -0.015em;
}
.routinesTitle b {
  font-weight: 560;
}
.routinesTitle sup {
  font-size: 8px;
  vertical-align: 9px;
  line-height: 0;
}
.routinesText {
  max-width: 380px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 19px;
}
.routineList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  gap: 10.5px;
  text-align: left;
}
.routine {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 10px;
  border-radius: 14px;
  background: var(--card);
}
.routineText {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.routineText b {
  font-weight: 500;
}
.routineText span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.routineRun {
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--surface-edge);
}
.routineRun:hover {
  background: var(--hover);
}

/* ——— The side card ——— */

.promo {
  position: absolute;
  z-index: 5;
  bottom: 14px;
  left: 14px;
  width: 306px;
  height: 498px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 4px 12px var(--shadow),
    0 16px 40px var(--shadow);
  animation: tc-pop 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.promo[data-closing] {
  opacity: 0;
  scale: 0.97;
  filter: blur(2px);
  transition:
    opacity 0.18s ease,
    scale 0.18s ease,
    filter 0.18s ease;
}
.promoArt {
  position: relative;
  height: 160px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.promoClose {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--muted);
}
.promoClose:hover {
  background: var(--surface);
  color: var(--ink);
}
.promoBody {
  padding: 16px 16px 0;
}
.promoKicker {
  display: block;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 18px;
}
.promoTitle {
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 330;
  line-height: 28px;
  letter-spacing: -0.04em;
}
.promoList {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  gap: 18px;
}
.promoList li {
  display: flex;
  gap: 15px;
}
.promoList li > svg {
  margin: 2px 0 0 -2px;
  color: var(--muted);
}
.promoList b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}
.promoList li > span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 17px;
}
.promoFoot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 9px 0 16px;
  border-top: 1px solid var(--line);
}
.learnMore {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}
.learnMore svg {
  opacity: 0;
  translate: -3px 0;
  transition:
    opacity 0.15s ease,
    translate 0.15s ease;
}
.learnMore:is(:hover, [data-hover], :focus-visible) {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: var(--faint);
  text-underline-offset: 4px;
}
.learnMore:is(:hover, [data-hover], :focus-visible) svg {
  opacity: 1;
  translate: 0 0;
}
.tryIt {
  height: 23px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--solid);
  color: var(--solid-ink);
  font-size: 12.5px;
}

/* The cards close up: the side card's picture and the release note's. */
.preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 80%, var(--glow-a));
}
.previewGlow {
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(closest-side at 25% 30%, var(--glow-a), transparent),
    radial-gradient(closest-side at 70% 40%, var(--glow-b), transparent),
    radial-gradient(closest-side at 45% 75%, var(--glow-c), transparent);
  animation: tc-drift 18s ease-in-out infinite alternate;
}
.previewCard {
  position: absolute;
  top: 42px;
  left: 31px;
  display: flex;
  flex-direction: column;
  width: 227px;
  height: 160px;
  padding: 14px 12px 0 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 90px, transparent 120px);
}
.previewCard[data-peek] {
  left: 276px;
}
.previewTitle {
  color: var(--ink);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.previewRow {
  display: flex;
  align-items: center;
  height: 29px;
  gap: 10px;
}
.previewTitle + .previewRow {
  margin-top: 8px;
}
.previewLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.previewWhen {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.previewWhen b {
  color: var(--ink);
}
.previewWhen[data-live] {
  color: var(--live);
}
.box {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--tile);
}
.preview[data-large] .previewCard {
  zoom: 1.74;
  top: 42px;
  left: 44px;
}
.preview[data-large] .previewCard[data-peek] {
  left: 285px;
}
.preview[data-large] .previewRow {
  animation: tc-blur-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 0.25s;
}

/* ——— Overlays ——— */

.scrim {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: var(--scrim);
  animation: tc-fade 0.18s ease both;
}
.scrim[data-closing] {
  opacity: 0;
  transition: opacity 0.14s ease;
}

.palette {
  position: absolute;
  z-index: 11;
  top: 90px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(631px, 100% - 24px);
  max-height: calc(100% - 110px);
  margin: 0 auto;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 12px 40px var(--shadow-2);
  animation: tc-pop 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.palette[data-closing],
.menuLayer[data-closing],
.article[data-closing] {
  opacity: 0;
  scale: 0.985;
  filter: blur(2px);
  transition:
    opacity 0.14s ease,
    scale 0.14s ease,
    filter 0.14s ease;
}
.paletteHead {
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 0 8px;
  gap: 6px;
}
.paletteBack {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  color: var(--muted);
}
.paletteBack:hover {
  background: var(--hover);
  color: var(--ink);
}
.paletteScope {
  display: flex;
  flex: none;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  gap: 8px;
  border-radius: 7px;
  background: var(--card);
  color: var(--ink-2);
}
.paletteInput {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin-left: 7px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
}
.paletteInput::placeholder {
  color: var(--faint);
}
.paletteInput:focus-visible {
  outline: none;
}
.paletteList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 3px 5px 40px;
  scrollbar-width: thin;
}
.paletteGroup {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 6px;
  color: var(--muted-2);
  font-size: 11.5px;
}
.paletteItem {
  position: relative;
  display: flex;
  align-items: center;
  height: 33px;
  padding: 0 8px 0 5px;
  gap: 10px;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.paletteItem[data-active] {
  background: var(--card);
}
.paletteIcon {
  flex: none;
  width: 16px;
  height: 14px;
  color: var(--muted);
}
.paletteBox {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
}
.paletteLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.paletteMeta {
  flex: none;
  color: var(--muted-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.paletteMeta[data-tone='live'] {
  color: var(--live);
}
.paletteMeta[data-tone='late'] {
  color: var(--late);
}
.paletteHint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  padding: 0 9px 0 40px;
  gap: 7px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--card) 34px);
  color: var(--muted-2);
  font-size: 12px;
}
.paletteItem[data-active] .paletteHint {
  display: flex;
}
.paletteEmpty {
  padding: 16px 8px;
  color: var(--muted);
}
.paletteFoot {
  position: absolute;
  right: 7px;
  bottom: 7px;
}
.paletteAction {
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--solid);
  color: var(--solid-ink);
  font-size: 12.5px;
}

.menuCatch {
  position: absolute;
  z-index: 11;
  inset: 0;
}
.menuLayer {
  position: absolute;
  z-index: 12;
  animation: tc-pop 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transform-origin: top right;
}
.menu,
.submenu {
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 6px 16px var(--shadow),
    0 18px 40px var(--shadow);
}
.menu {
  display: flex;
  flex-direction: column;
}
.submenu {
  position: absolute;
  left: calc(100% + 4.5px);
  display: flex;
  flex-direction: column;
  width: 223px;
  animation: tc-pop 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.submenu[data-side='left'] {
  right: calc(100% + 4.5px);
  left: auto;
}
.submenu[data-side='below'] {
  right: 12px;
  left: auto;
  max-width: calc(100cqw - 24px);
}
.menuItem {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 33px;
  padding: 0 10px 0 6px;
  gap: 11px;
  border-radius: 8px;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
.menuItem[data-active],
.menuItem:focus-visible {
  background: var(--card);
  outline: none;
  transition-duration: 0.06s;
}
.menuIcon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.menuMark {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--muted-2);
  transition: color 0.12s ease;
}
.menuItem[data-active] .menuMark,
.menuItem:focus-visible .menuMark,
.menu .menuItem[aria-haspopup] .menuMark {
  color: var(--ink);
}
.menuLabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.menuCaret {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--ink-2);
}
.menuHint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 10px 0 44px;
  gap: 7px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--card) 40px);
  color: var(--muted-2);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.menuItem:is([data-active], :focus-visible) .menuHint {
  opacity: 1;
}

.article {
  position: absolute;
  z-index: 11;
  top: 12px;
  right: 0;
  bottom: 12px;
  left: 0;
  width: min(720px, 100% - 16px);
  margin: 0 auto;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 16px 50px var(--shadow-2);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  animation: tc-pop 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.articleClose {
  position: sticky;
  z-index: 1;
  top: 12px;
  float: right;
  display: grid;
  width: 28px;
  height: 28px;
  margin: 12px 12px 0 0;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
}
.articleClose:hover {
  color: var(--ink);
}
.articleBody {
  display: flex;
  flex-direction: column;
  max-width: 563px;
  margin: 0 auto;
  padding: 56px 0 72px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 21.6px;
}
.articleKicker {
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-family: 'Library Mono', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.articleTitle {
  margin-top: 14px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 330;
  line-height: 40px;
  letter-spacing: -0.035em;
}
.articleLede {
  margin-top: 12px;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 24px;
}
.articleByline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-2);
  font-family: 'Library Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.authors {
  display: flex;
}
.authors span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
  background: radial-gradient(circle at 50% 38%, #e9c3a5 0 26%, transparent 27%), #6b5a4e;
}
.authors span + span {
  margin-left: -5px;
  background: radial-gradient(circle at 50% 38%, #f0cfb0 0 26%, transparent 27%), #a8573b;
}
.articleText {
  margin-top: 28px;
}
.articleFigure {
  position: relative;
  height: 318px;
  margin: 50px -28px 6px;
  overflow: hidden;
  border-radius: 18px;
}
.articleHeading {
  margin-top: 38px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 330;
  line-height: 30px;
  letter-spacing: -0.025em;
}
.articleHeading + .articleText {
  margin-top: 16px;
}
.articlePoints {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  gap: 6px;
}
.articlePoints li {
  display: flex;
  gap: 14px;
}
.articlePoints li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 11px;
  background: var(--faint);
}

.toasts {
  position: absolute;
  z-index: 20;
  right: 32px;
  bottom: 32px;
  display: grid;
  width: 355px;
  pointer-events: none;
}
.toast {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  align-self: end;
  height: 56px;
  padding: 0 15px 0 14px;
  gap: 11px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--surface-edge),
    0 4px 16px var(--shadow);
  pointer-events: auto;
  animation: tc-toast-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toast[data-leaving] {
  pointer-events: none;
  animation: tc-toast-out 0.2s ease-in both;
}
.toastTick {
  display: grid;
  flex: none;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.toastText {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.toastUndo {
  height: 23px;
  padding: 0 11px;
  border-radius: 12px;
  background: var(--hover);
  color: var(--ink);
}
.toastClose {
  display: grid;
  width: 21px;
  height: 21px;
  margin-left: 3px;
  place-items: center;
  border-radius: 50%;
  background: var(--hover);
  color: var(--muted);
}
.toastUndo:hover,
.toastClose:hover {
  background: var(--row-hover);
  color: var(--ink);
}

/* ——— The demo's pointer ——— */

.pointerLayer {
  position: absolute;
  z-index: 50;
  inset: 0;
  pointer-events: none;
}
.pointer {
  width: 22px;
  height: 22px;
}
.hand {
  visibility: hidden;
}
.pointer[data-glyph='hand'] .arrow {
  visibility: hidden;
}
.pointer[data-glyph='hand'] .hand {
  visibility: visible;
}

/* ——— Narrow ——— */

.drawerScrim {
  display: none;
}
@container today (max-width: 899px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    height: 860px;
  }
  .sidebar {
    position: absolute;
    z-index: 15;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    box-shadow: 0 0 40px var(--shadow-2);
    translate: -105% 0;
    transition: translate 0.25s cubic-bezier(0.3, 0.7, 0.2, 1);
    visibility: hidden;
  }
  .sidebar[data-open] {
    translate: 0 0;
    visibility: visible;
  }
  .app[data-drawer] .drawerScrim {
    position: absolute;
    z-index: 14;
    inset: 0;
    display: block;
    background: var(--scrim);
    animation: tc-fade 0.2s ease both;
  }
  .menuButton {
    display: grid;
  }
  .promo {
    display: none;
  }
  .hero {
    padding-top: 112px;
  }
  .chipArrow {
    display: none;
  }
}
@container today (max-width: 639px) {
  .app {
    height: 780px;
  }
  .hero {
    padding-top: 84px;
  }
  .mark {
    width: 52px;
    height: 52px;
  }
  .greeting {
    margin-top: 12px;
    font-size: 26px;
    line-height: 34px;
  }
  .chipRow {
    width: calc(100% + 32px);
  }
  .chipView {
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 32px,
      #000 calc(100% - 32px),
      transparent
    );
  }
  .tray > span:first-child {
    display: none;
  }
  .tray {
    justify-content: center;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .date::before,
  .date::after {
    width: 60px;
  }
  .routineList {
    grid-template-columns: minmax(0, 1fr);
  }
  .toasts {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }
  .tools .tool:nth-child(2) {
    display: none;
  }
}

@keyframes tc-word-in {
  from {
    opacity: 0;
    filter: blur(8px);
    translate: 0 4px;
  }
}
@keyframes tc-word-out {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes tc-blur-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}
@keyframes tc-fade {
  from {
    opacity: 0;
  }
}
@keyframes tc-pop {
  from {
    opacity: 0;
    scale: 0.97;
    filter: blur(3px);
  }
}
@keyframes tc-toast-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
@keyframes tc-toast-out {
  to {
    opacity: 0;
    translate: 0 -10px;
    scale: 0.97;
  }
}
@keyframes tc-drift {
  from {
    transform: translate(-6%, -4%) rotate(0deg);
  }
  to {
    transform: translate(6%, 5%) rotate(25deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .root *,
  .root *::before,
  .root *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}
```