.work-preview-trigger {
  display: inline-block; padding: 0; border: 0; background: none; border-radius: 2px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--muted);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 120ms var(--ease), text-decoration-color 120ms var(--ease);
}
.work-preview-trigger:hover, .work-preview-trigger[aria-expanded="true"] { color: var(--ink); text-decoration-style: solid; }
.work-preview {
  position: fixed; inset: auto; margin: 0; padding: 0; width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 36px #00000014, 0 2px 8px #00000008;
  font-size: .8125rem; line-height: 1.6; text-align: left;
}
:root[data-theme="dark"] .work-preview { box-shadow: 0 12px 36px #0005, 0 2px 8px #0003; }
.work-preview::backdrop { background: transparent; pointer-events: none; }
.work-preview > img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.work-preview-copy { padding: 15px 16px 17px; }
.work-preview h3 { margin: 0 0 6px; color: var(--ink); font-size: .9375rem; font-weight: 550; letter-spacing: -.015em; line-height: 1.4; }
.work-preview p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .work-preview-trigger { transition: none; } }
@media print { .work-preview { display: none !important; } }