@property --ga { syntax: "<number>"; inherits: true; initial-value: 1; }

/* Tokens and components shared by every page (see DESIGN.md). Link it before a page's own CSS; page layout stays with each page.
   Element defaults use :where() so any page rule overrides them. */
:root {
  --ga: 1;
  --font-display: "IM Fell English", Georgia, serif;
  --font-body: "Alegreya Sans", system-ui, sans-serif;
  --font-label: "Alegreya Sans SC", "Alegreya Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --snap: cubic-bezier(.34, 1.56, .64, 1);
  /* Leaded glass: every surface is a pane in a dark lead frame (DESIGN.md, Rebrand: Seppo's Artifactory) */
  --lead: var(--frame);
  --lead-w: 3px;
  --lead-w-panel: 4px;
  --lead-w-thin: 2px;
  --bevel: color-mix(in srgb, white 16%, transparent);
  --lead-lit: color-mix(in srgb, var(--ui-highlight) 55%, var(--frame));
  --cut-light: linear-gradient(135deg, color-mix(in srgb, white 16%, transparent) 0 30%, transparent 30% 100%);
  --cut-light-strong: linear-gradient(135deg, color-mix(in srgb, white 30%, transparent) 0 26%, transparent 26% 64%, color-mix(in srgb, black 10%, transparent) 64%);
  --glint: linear-gradient(115deg, transparent 38%, color-mix(in srgb, white 34%, transparent) 50%, transparent 62%);
  --edge: var(--lead);
  --edge-strong: var(--lead-lit);
  --edge-hover: var(--lead-lit);
  --rule: color-mix(in srgb, var(--frame) 80%, transparent);
  --sheen: linear-gradient(135deg, color-mix(in srgb, white calc(var(--ga) * 9%), transparent), transparent 40%);
  --glass-thin: color-mix(in srgb, var(--ui-glass) calc(var(--ga) * 66%), transparent);
  --glass-thick: color-mix(in srgb, var(--ui-glass) calc(var(--ga) * 82%), transparent);
  --glass-blur: blur(calc(var(--ga) * 20px)) saturate(calc(100% + var(--ga) * 70%));
  --well: color-mix(in srgb, var(--frame) 55%, transparent);
  --lift: 0 16px 40px color-mix(in srgb, var(--frame) calc(var(--ga) * 55%), transparent);
  --rim: inset 0 0 0 1px var(--bevel);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 28%, transparent);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
:where(body) { margin: 0; color: var(--ui-text); font-family: var(--font-body); }
:where(a) { color: var(--ui-highlight); text-underline-offset: 3px; }

/* Selection, focus, caret and scrollbars */
::selection { background: var(--ui-accent); color: var(--ui-on-accent); }
:focus-visible { outline: 2px solid var(--ui-highlight); outline-offset: 2px; }
:where(input, textarea) { caret-color: var(--ui-highlight); }
:where(input, textarea, select):focus-visible { outline: none; border-color: var(--ui-highlight); box-shadow: var(--focus-ring); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-text-soft) 35%, transparent) transparent; }

/* Liquid glass: sheen over the Glass tint, Glass Edge line, blur, lift and rim. Thick glass is for surfaces you read on. */
.glass {
  color: var(--ui-text); border-radius: 10px;
  background: var(--sheen), var(--glass-thin);
  border: var(--lead-w-panel) solid var(--lead);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--lift), var(--rim), inset 0 0 0 5px color-mix(in srgb, var(--ui-glass-edge) 10%, transparent);
}
.glass.thick { background: var(--sheen), var(--glass-thick); }

/* Light runs across the glass on hover: a band of white sweeps once under the content */
:where(button:not(:disabled), .card) { position: relative; isolation: isolate; overflow: hidden; }
:where(button:not(:disabled), .card)::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: var(--glint); transform: translateX(-130%); }
:where(button:not(:disabled), .card):hover::before { transform: translateX(130%); transition: transform .8s var(--ease); }

/* Buttons: glass by default, .primary (Accent), .secondary (outline), .danger (Warnings) */
:where(button) {
  font: inherit; color: var(--ui-text); cursor: pointer;
  border: var(--lead-w) solid var(--lead); border-radius: 7px; padding: 8px 14px;
  background: var(--cut-light), color-mix(in srgb, var(--ui-glass) 70%, var(--ui-glass-edge));
  box-shadow: var(--rim);
  transition: border-color .25s, background .25s, transform .25s var(--snap), filter .25s, box-shadow .25s;
}
:where(button):hover:not(:disabled) { border-color: var(--lead-lit); transform: translateY(-2px); box-shadow: var(--rim), 0 8px 18px color-mix(in srgb, var(--frame) 50%, transparent); }
:where(button):active:not(:disabled) { transform: translateY(1px) scale(.97); filter: brightness(.92); box-shadow: inset 0 3px 8px color-mix(in srgb, black 40%, transparent), var(--rim); transition-duration: .07s; }
:where(button):focus-visible { outline: none; border-color: var(--ui-highlight); box-shadow: var(--rim), var(--focus-ring); }
:where(button):disabled { opacity: .45; cursor: default; }
:where(button.primary, button.secondary, button.danger) { font-family: var(--font-label); font-weight: 700; font-size: 16px; letter-spacing: .06em; padding: 11px 18px; }
:where(button.primary) { background: var(--cut-light-strong), var(--ui-accent); color: var(--ui-on-accent); }
:where(button.primary):hover:not(:disabled) { box-shadow: var(--rim), 0 8px 22px color-mix(in srgb, var(--ui-accent) 40%, transparent); }
:where(button.secondary) { background: transparent; border-color: color-mix(in srgb, var(--lead) 80%, var(--ui-glass-edge)); }
:where(button.danger) { background: var(--cut-light-strong), var(--ui-warn); color: var(--ui-on-accent); }
:where(button.danger):hover:not(:disabled) { box-shadow: var(--rim), 0 8px 22px color-mix(in srgb, var(--ui-warn) 40%, transparent); }

/* Shards: a click on a filled button chips off a few slivers of its glass (made by crossing.js) */
.shard { position: fixed; z-index: 1000; width: 9px; height: 11px; pointer-events: none; clip-path: polygon(50% 0, 100% 100%, 0 70%); background: var(--shard); filter: drop-shadow(0 0 3px var(--shard));
  animation: shard .65s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes shard { from { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.4); opacity: 0; } }


/* Fields: a dark well with a Glass Edge line */
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), textarea, select) {
  font: inherit; color: var(--ui-text); background: var(--well);
  border: var(--lead-w) solid var(--lead); border-radius: 6px; padding: 11px 14px;
  box-shadow: var(--rim);
  transition: border-color .3s, box-shadow .3s;
}
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), textarea, select):hover { border-color: color-mix(in srgb, var(--lead-lit) 60%, var(--lead)); }
:where(input, textarea):focus-visible { box-shadow: var(--rim), inset 0 0 18px color-mix(in srgb, var(--ui-highlight) 14%, transparent), var(--focus-ring); }
.select::after { transition: transform .35s var(--snap); }
.select:hover::after { transform: translateY(2px); }
:where(input, textarea)::placeholder { color: var(--ui-text-soft); }
:where(select) { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px; }
:where(select) option { color: var(--ui-on-accent); background: var(--ui-title); }

/* Selects draw their chevron as a currentColor mask on a wrapping .select (or the language slot) */
.select, [data-language-slot] { position: relative; display: inline-flex; max-width: 100%; color: var(--ui-text); }
.select::after, [data-language-slot]::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 13px; height: 13px; margin-top: -7px; pointer-events: none;
  background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
}
.select select { max-width: 100%; }
.select select:hover { border-color: color-mix(in srgb, var(--ui-highlight) 50%, transparent); }

/* Language picker (added by i18n.js into [data-language-slot]): thin glass in small caps */
.language-switcher {
  height: 38px; padding: 0 32px 0 14px; border-radius: 6px;
  font: 700 13px/1 var(--font-label); letter-spacing: .08em; color: var(--ui-text);
  border: var(--lead-w) solid var(--lead);
  background: var(--cut-light), var(--glass-thin);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--rim);
  transition: border-color .25s;
}
.language-switcher:hover { border-color: var(--edge-hover); }
/* Compact slot (data-compact): the code in small caps, the native picker invisible on top of it */
.language-code { display: none; }
[data-language-slot][data-compact] .language-code { display: flex; align-items: center; height: 100%; padding: 0 30px 0 14px; font: 700 14px/1 var(--font-label); letter-spacing: .1em; }
[data-language-slot][data-compact] .language-switcher { position: absolute; inset: 0; width: 100% !important; height: 100%; opacity: 0; cursor: pointer; }
[data-language-slot][data-compact]:has(.language-switcher:focus-visible) { outline: 2px solid var(--ui-highlight); outline-offset: 2px; }

/* Cards inside a glass surface: a white wash with a Glass Edge line, lit by --light on hover */
.card {
  --light: var(--ui-accent);
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 6px; text-decoration: none; color: var(--ui-text);
  background: color-mix(in srgb, white 5%, transparent); border: var(--lead-w) solid var(--lead); box-shadow: var(--rim);
  transition: transform .35s var(--snap), border-color .3s, background .3s;
}
.card[data-light="gold"] { --light: var(--gold); }
.card[data-light="river"] { --light: var(--ui-highlight); }
.card[data-light="wax"] { --light: var(--ui-wax); }
.card[data-light="knot"] { --light: var(--ui-knot); }
.card[data-light="mere"] { --light: var(--ui-mere); }
:is(a, summary).card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--light) 55%, var(--lead)); background: color-mix(in srgb, var(--light) 12%, transparent); }
:is(a, summary).card:active { transform: scale(.985); transition-duration: .07s; }
.card strong { display: block; font: 400 24px/1.1 var(--font-display); color: var(--ui-title); }
.card small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--ui-text-soft); }
/* A tool's plain description under its name: small, faded IM Fell italic */
.tool-description { font: italic 400 12.5px/1.25 var(--font-display); letter-spacing: .02em; color: color-mix(in srgb, var(--ui-text) 62%, transparent); }
.card-icon {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, white 32%, transparent) 0 30%, transparent 30%), var(--light); color: var(--ui-on-accent);
  border: var(--lead-w) solid var(--lead); transition: box-shadow .4s, transform .4s var(--snap);
}
.card-icon svg { width: 25px; height: 25px; }
.card:hover .card-icon { transform: rotate(-4deg) scale(1.06); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--light) 55%, transparent); }

/* Empty state: one glass card with the app's light tile (--brand-light, --brand-icon) and an IM Fell line */
.empty {
  position: relative; margin: auto; max-width: 30em; padding: 26px 30px 28px; border-radius: 10px; text-align: center; border-width: var(--lead-w-panel) !important;
  font: 400 22px/1.35 var(--font-display); color: var(--ui-title); text-wrap: balance;
  background: var(--sheen), var(--glass-thick); border: var(--lead-w) solid var(--lead);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--lift), var(--rim);
}
.empty::before {
  content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, white 32%, transparent) 0 30%, transparent 30%), var(--brand-light); border: var(--lead-w) solid var(--lead); box-shadow: 0 0 28px 5px color-mix(in srgb, var(--brand-light) 35%, transparent);
}
.empty::after {
  content: ""; position: absolute; top: 40px; left: 50%; width: 24px; height: 24px; margin-left: -12px;
  background: var(--ui-on-accent); -webkit-mask: var(--brand-icon) center / contain no-repeat; mask: var(--brand-icon) center / contain no-repeat;
}
@media (max-width: 480px) { .empty { padding: 22px 20px 24px; font-size: 20px; } }

/* ---------- Workspace (data-scene="workspace", set on <html> by palette.js) ----------
   The serious mode: no storybook, solid surfaces, 1px borders, 6px corners, the system UI face at 14px, Primer-like
   controls and quick, quiet colour changes only. Sky is the canvas, Forest the panels, Land the borders, Accent the
   primary buttons, Water links, focus and selection (DESIGN.md, Workspace). Element defaults keep zero specificity
   (:where) so page rules still win; the rest is written for the scene. */
:root[data-scene="workspace"] {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --font-label: var(--font-display);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.3, 0, .5, 1);
  --snap: cubic-bezier(.3, 0, .5, 1);
  --ws-subtle: color-mix(in srgb, var(--land) 40%, var(--forest));
  --ws-hover: color-mix(in srgb, var(--land) 75%, var(--forest));
  --ws-row-hover: color-mix(in srgb, var(--light) 6%, transparent);
  --ws-selected: color-mix(in srgb, var(--light) 9%, transparent);
  --ws-overlay-shadow: 0 8px 24px color-mix(in srgb, black 45%, transparent);
  --ws-transition: color .1s ease, background-color .1s ease, border-color .1s ease, box-shadow .1s ease;
  --lead: var(--land);
  --lead-w: 1px;
  --lead-w-panel: 1px;
  --lead-w-thin: 1px;
  --bevel: transparent;
  --lead-lit: color-mix(in srgb, var(--light) 32%, var(--land));
  --cut-light: linear-gradient(transparent, transparent);
  --cut-light-strong: linear-gradient(transparent, transparent);
  --glint: none;
  --edge: var(--land);
  --edge-strong: var(--lead-lit);
  --edge-hover: var(--lead-lit);
  --rule: var(--land);
  --sheen: linear-gradient(transparent, transparent);
  --glass-thin: var(--ui-glass);
  --glass-thick: var(--ui-glass);
  --glass-blur: none;
  --well: var(--sky);
  --lift: none;
  --rim: 0 0 transparent;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 35%, transparent);
  color-scheme: dark;
}
:root[data-scene="workspace"] * { letter-spacing: 0 !important; }
:root[data-scene="workspace"] body { font-size: 14px; line-height: 1.5; }
:root[data-scene="workspace"] :focus-visible { outline: 2px solid var(--ui-highlight); outline-offset: -2px; }
:root[data-scene="workspace"] ::selection { background: color-mix(in srgb, var(--ui-highlight) 40%, transparent); color: var(--ui-title); }
:where(:root[data-scene="workspace"]) :where(a) { color: var(--ui-highlight); text-decoration: none; }
:where(:root[data-scene="workspace"]) :where(a:not([class])):hover { text-decoration: underline; }

/* Section labels and headings: sentence case, semibold, no small caps */
:root[data-scene="workspace"] :is(main > h2, .panel h2, .menu-heading, .section-label) { text-transform: none; font: 600 14px/1.5 var(--font-body); color: var(--ui-title); }
:root[data-scene="workspace"] :is(.space-label, .usage-head, th, .list-head, .tray-head, .index-group h3) { text-transform: none; font: 600 12px/1.5 var(--font-body); color: var(--ui-text-soft); }
:root[data-scene="workspace"] :is(h1, h2, h3, .card strong) { font-weight: 600; }

/* Surfaces: solid panels with a 1px border, no blur, sheen or lift */
:root[data-scene="workspace"] :is(.glass, .glass.thick) {
  background: var(--ui-glass); border: 1px solid var(--land); border-radius: 6px;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}

/* No light runs across anything */
:root[data-scene="workspace"] :is(button, .card)::before { content: none; }
:root[data-scene="workspace"] .shard { display: none; }

/* Buttons (Primer): default is a subtle surface with a border; primary is solid Accent with white text;
   danger is red text that fills red on hover. Nothing lifts or sinks. */
:where(:root[data-scene="workspace"]) :where(button) {
  font: 500 14px/20px var(--font-body); color: var(--ui-text);
  padding: 5px 16px; border-radius: 6px; border: 1px solid var(--lead);
  background: var(--ws-subtle); box-shadow: none; transition: var(--ws-transition);
}
:where(:root[data-scene="workspace"]) :where(button):hover:not(:disabled) { background: var(--ws-hover); border-color: var(--lead-lit); }
:where(:root[data-scene="workspace"]) :where(button):active:not(:disabled) { background: color-mix(in srgb, var(--land) 90%, var(--light)); }
:where(:root[data-scene="workspace"]) :where(button):focus-visible { outline: 2px solid var(--ui-highlight); outline-offset: -2px; box-shadow: none; }
:where(:root[data-scene="workspace"]) :where(button):disabled { opacity: .5; }
:where(:root[data-scene="workspace"]) :where(button.primary, button.secondary, button.danger) { font: 500 14px/20px var(--font-body); padding: 5px 16px; }
:where(:root[data-scene="workspace"]) :where(button.primary) { background: var(--ui-accent); color: var(--ui-on-accent); border-color: color-mix(in srgb, white 10%, transparent); }
:where(:root[data-scene="workspace"]) :where(button.primary):hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent) 88%, white); border-color: color-mix(in srgb, white 10%, transparent); }
:where(:root[data-scene="workspace"]) :where(button.primary):active:not(:disabled) { background: color-mix(in srgb, var(--ui-accent) 88%, black); }
:where(:root[data-scene="workspace"]) :where(button.secondary) { background: var(--ws-subtle); border-color: var(--lead); }
:where(:root[data-scene="workspace"]) :where(button.danger) { background: var(--ws-subtle); color: var(--ui-warn); border-color: var(--lead); }
:where(:root[data-scene="workspace"]) :where(button.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--ui-warn) 72%, black); color: white; border-color: color-mix(in srgb, var(--ui-warn) 72%, black); }
:root[data-scene="workspace"] :is(button, button.primary, button.danger):hover:not(:disabled),
:root[data-scene="workspace"] :is(button, button.primary, button.danger):active:not(:disabled) { transform: none; filter: none; box-shadow: none; }

/* Fields: canvas well, 1px border, a 3px Water ring on focus */
:where(:root[data-scene="workspace"]) :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), textarea, select) {
  font: 400 14px/20px var(--font-body); color: var(--ui-text); background: var(--sky);
  border: 1px solid var(--lead); border-radius: 6px; padding: 5px 12px; box-shadow: none; transition: var(--ws-transition);
}
:where(:root[data-scene="workspace"]) :where(select) { padding-right: 32px; background: var(--ws-subtle); }
:root[data-scene="workspace"] :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), textarea, select):hover { border-color: var(--lead); }
:root[data-scene="workspace"] :is(input, textarea, select):focus-visible { outline: none; border-color: var(--ui-highlight); box-shadow: var(--focus-ring); }
:root[data-scene="workspace"] :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--ui-text-soft) 80%, transparent); }
:root[data-scene="workspace"] .select:hover::after { transform: none; }
:root[data-scene="workspace"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-highlight); }

/* Language picker: a default button */
:root[data-scene="workspace"] .language-switcher {
  height: 32px; padding: 0 30px 0 12px; border-radius: 6px; font: 500 14px/1 var(--font-body); color: var(--ui-text);
  border: 1px solid var(--lead); background: var(--ws-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
:root[data-scene="workspace"] .language-switcher:hover { background: var(--ws-hover); border-color: var(--lead-lit); }
:root[data-scene="workspace"] [data-language-slot][data-compact] .language-code { font: 500 14px/1 var(--font-body); padding: 0 28px 0 12px; }
:root[data-scene="workspace"] :is(.select, [data-language-slot])::after { width: 12px; height: 12px; margin-top: -6px; right: 10px; color: var(--ui-text-soft); }

/* Cards: bordered boxes; hover only shades them */
:root[data-scene="workspace"] .card {
  gap: 12px; padding: 16px; border-radius: 6px; background: transparent; border: 1px solid var(--land); box-shadow: none; transition: var(--ws-transition);
}
:root[data-scene="workspace"] :is(a, summary).card:hover { transform: none; background: var(--ws-row-hover); border-color: var(--lead-lit); text-decoration: none; }
:root[data-scene="workspace"] :is(a, summary).card:active { transform: none; }
:root[data-scene="workspace"] .card strong { font: 600 16px/1.25 var(--font-body); color: var(--ui-title); }
:root[data-scene="workspace"] .card small { font-size: 13px; line-height: 1.5; }
:root[data-scene="workspace"] .card-icon,
:root[data-scene="workspace"] .card:hover .card-icon {
  width: 40px; height: 40px; border-radius: 6px; transform: none; box-shadow: none;
  background: var(--ws-subtle); color: var(--ui-text-soft); border: 1px solid var(--land);
}
:root[data-scene="workspace"] .card-icon svg { width: 20px; height: 20px; }
:root[data-scene="workspace"] .card:hover .card-icon { color: var(--ui-text); }

/* A tool's description: plain, small and muted */
:root[data-scene="workspace"] .tool-description { font: 400 12px/1.5 var(--font-body); font-style: normal; color: var(--ui-text-soft); }

/* Empty state: a bordered box with a quiet icon */
:root[data-scene="workspace"] .empty {
  padding: 32px 32px 28px; border-radius: 6px; border: 1px solid var(--land) !important; background: var(--ui-glass);
  font: 400 16px/1.5 var(--font-body); color: var(--ui-text); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
:root[data-scene="workspace"] .empty::before { width: 40px; height: 40px; background: var(--ws-subtle); border: 1px solid var(--land); box-shadow: none; }
:root[data-scene="workspace"] .empty::after { top: 42px; width: 20px; height: 20px; margin-left: -10px; background: var(--ui-text-soft); }

/* Motion: colour and border changes only, 100ms */
:root[data-scene="workspace"] :is(.language-switcher, .card, .card-icon) { transition: var(--ws-transition); }

@media (prefers-reduced-motion: reduce) {
  :where(button), .language-switcher, .card, .card-icon, .select::after { transition: none !important; }
  :where(button, .card)::before { display: none; }
  .shard { display: none; }
  :root[data-scene="workspace"] * { transition: none !important; animation: none !important; }
}

/* Who added or last changed something (site/shared/byline.js): a small round picture or initials beside a sentence */
.byline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.byline-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-avatar {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--lead); object-fit: cover;
  background: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-glass)); color: var(--ui-text);
  font: 700 9px/1 var(--font-body); letter-spacing: 0;
}
:root[data-scene="workspace"] .person-avatar { border: 1px solid var(--land); background: var(--ws-subtle); color: var(--ui-text-soft); }