/* ── Ori Cohen — quiet, light, one page ─────────────────────
   Light ground, understated type, pastel panels with soft
   shadows, and content that opens in a sheet instead of a page.
   ───────────────────────────────────────────────────────── */
:root {
  --ink:       #1a1a1a;
  --ink-2:     #222222;
  --ink-mute:  #a6a6a6;   /* the grey half of every title pair */
  --hairline:  #ececec;
  --paper:     #ffffff;
  --sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure:   680px;
  --text:      17px;      /* one size for nearly everything */
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────────── */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 40px 40px;
}

/* ── Intro ──────────────────────────────────────────────── */
/* The title pair and the bio are one block of text, not two sections, so
   the gap between them is an ordinary paragraph gap. */
.intro {
  margin-bottom: 20px;
}

h1 {
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  margin-bottom: 0;
}

.bio p {
  margin-bottom: 20px;
  font-size: var(--text);
  color: var(--ink-2);
  max-width: var(--measure);
}

.read-more {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #c9c9c9;
  cursor: pointer;
  transition: text-decoration-color 0.15s ease;
}

.read-more:hover { text-decoration-color: var(--ink); }

.read-more:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Phrases worth noticing sit in ink until the pointer finds them, then
   take their own colour; their emoji goes from grey to full colour with a
   small kick. Nothing moves in the line itself, so the text never reflows. */
.pop {
  color: inherit;
  transition: color 0.2s ease;
}

.pop:hover { color: var(--pop); }
.pop:hover strong { color: var(--pop); }

.bio .icon {
  display: inline-block;
  font-size: 15px;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.7, 0.64, 1);
}

.pop:hover .icon {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px) rotate(-8deg) scale(1.22);
}

@media (prefers-reduced-motion: reduce) {
  .bio .icon { transition: filter 0.25s ease, opacity 0.25s ease; }
  .pop:hover .icon { transform: none; }
}

@media (hover: none) {
  .bio .icon { filter: none; opacity: 1; }
}

/* ── Work ───────────────────────────────────────────────── */
.work {
  margin-top: 88px;
}

.work-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.work h2 {
  font-size: var(--text);
  font-weight: 400;
  color: var(--ink);
}

/* ── Stacked / grid toggle ──────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 10px;
  flex: none;
}

.view-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #cfcfcf;
  cursor: pointer;
  transition: color 0.25s ease;
}

.view-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.view-btn[data-view="grid"] svg { fill: currentColor; stroke: none; }

.view-btn:hover { color: #9a9a9a; }

.view-btn.is-active { color: #767676; }

.view-btn:focus-visible {
  outline: 2px solid #9a9a9a;
  outline-offset: 3px;
  border-radius: 4px;
}

/* The two icons are not self-evident, so each names itself on hover. */
.view-btn { position: relative; }

.view-btn::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

.view-btn:hover::after,
.view-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
  .view-btn::after { display: none; }
}

/* The deck: every card occupies the same box, offset by its depth. */
.work-stack {
  list-style: none;
  position: relative;
  height: 400px;
  margin-bottom: 8px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.work-stack:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 12px;
  border-radius: 32px;
}

.work-item {
  position: absolute;
  inset: 0;
  transform:
    translate(var(--x, 0px), var(--y, 0px))
    translateY(calc(var(--depth, 0) * 14px))
    scale(calc(1 - var(--depth, 0) * 0.045));
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s ease;
  will-change: transform;
}

/* A card in hand. */
.work-item.is-lifted { z-index: 99; }

.work-item.is-lifted .work-card {
  box-shadow: 0 30px 60px -24px rgba(20, 20, 40, 0.5);
}

.work-item.no-transition { transition: none; }

.work-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: grab;
  border-radius: 28px;
  box-shadow: 0 18px 44px -26px rgba(20, 20, 40, 0.45);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.work-card:active { cursor: grabbing; }

.work-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel, #eef0fb);
  border-radius: 28px;
  padding: 28px 32px 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 28px);
  transition: border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              clip-path 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* On hover only the background moves: the panel's painted box crops inward
   from both sides and the shadow under it deepens. Nothing is scaled and
   nothing is lifted, so the head and the screenshot hold exactly still. */
.work-card:hover,
.work-card:focus-visible {
  box-shadow: 0 24px 48px -28px rgba(20, 20, 40, 0.40);
}

.work-card:hover .work-panel,
.work-card:focus-visible .work-panel {
  clip-path: inset(0 7px 0 7px round 28px);
}


.work-head {
  display: block;
  margin-bottom: 22px;
}

.work-title,
.work-sub {
  display: block;
  font-size: var(--text);
  line-height: 1.45;
}
.work-title { color: var(--on-panel, var(--ink)); }
.work-sub   { color: var(--on-panel-mute, var(--ink-mute)); }


.work-screen {
  display: block;
  flex: 1;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  transition: border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  box-shadow: 0 18px 40px -16px rgba(20, 20, 40, 0.30),
              0 2px 6px rgba(20, 20, 40, 0.06);
}

/* A product shot scales to the full width of the screen and is cropped at
   the bottom, so the interface keeps its own proportions. */
.work-screen img {
  display: block;
  width: 100%;
  height: auto;
  /* Without this the browser's own image drag hijacks the card gesture. */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── The card with nothing in it yet ────────────────────── */
/* No product shot, so nothing sits in a white frame: a small departure
   board floats in the card's own colour. */
.work-screen--soon {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 46px;
  background: none;
  box-shadow: none;
}

/* Old interface work, cycling in place. Each frame fills the width and
   carries on past the bottom of the frame, the same way the other two
   cards hold their screenshots — nothing is cut at the sides and there is
   no mount showing around it. They cut from one to the next rather than
   cross-fading: two different interfaces dissolving through each other
   read as a ghost. */
.reel {
  position: relative;
  display: block;
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.reel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-drag: none;
}

.reel img.is-on { visibility: visible; }

.soon-label {
  position: absolute;
  left: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-panel-mute, rgba(255, 255, 255, 0.75));
}

.soon-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--on-panel, #fff);
  animation: soon-blink 1.8s ease-in-out infinite;
}

@keyframes soon-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-pulse { animation: none; }
}


/* ── A working interface, not a picture of one ──────────── */
/* The Jedox card rebuilds the product at the screenshot's own size and
   scales the whole stage to the card. Every position and colour here was
   measured off the screenshot; see jedox-live.js. */
.work-screen--live {
  position: relative;
  background: #e8ebed;
}

.ui {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.ui-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background: #e8ebed;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  color: #0f172b;
  -webkit-font-smoothing: antialiased;
}

.ui-stage span { position: absolute; display: block; white-space: nowrap; }
.ui-stage svg { display: block; }

.ui-rail { background: #ffffff; border-right: 1px solid #cad5e2; }
.ui-rail-on { background: #eff6ff; border-radius: 7px; }

.ui-top { background: #ffffff; border-bottom: 1px solid #cad5e2; }
.ui-crumb { display: flex !important; align-items: center; gap: 9px; font-size: 13.5px; }
.ui-crumb i, .ui-crumb em, .ui-crumb b { font-style: normal; font-weight: 400; }
.ui-crumb i { color: #45556c; }
.ui-crumb b { color: #8b95a3; font-size: 12px; }
.ui-crumb em { color: #0f172b; }
.ui-search { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; color: #62748e; font-size: 13px; }
.ui-pill { background: #ebf2ff; border-radius: 7px; color: #0042ae; font-weight: 600; font-size: 13px; }
.ui-dot { background: #e63879; border-radius: 50%; }
.ui-sep { background: #e2e8f0; }
.ui-avatar { background: #e2e8f0; border-radius: 50%; text-align: center; line-height: 27px; font-size: 10.5px; color: #45556c; }

.ui-filter {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}
.ui-filter span { position: static; }
.ui-filter-k { color: #45556c; font-weight: 500; }
.ui-filter-v { color: #0f172b; font-weight: 600; }

.ui-card { background: #ffffff; border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 43, 0.05); overflow: hidden; }
.ui-card-t { font-size: 14.5px; font-weight: 600; color: #3f4555; }

.ui-grid-h { border-top: 1px dashed #e2e8f0; }
.ui-grid-v { border-left: 1px dashed #eef1f5; }
.ui-axis-y { border-left: 1px solid #666666; }
.ui-axis-x { border-top: 1px solid #666666; }
.ui-axis-l, .ui-axis-m { font-size: 11px; color: #64748b; }
.ui-axis-m { width: 40px; text-align: center; }

.ui-bar {
  background: #00355e;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: calc(var(--i) * 45ms);
}
.ui-stack {
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: calc(200ms + var(--i) * 90ms);
}
.ui.is-charts .ui-bar,
.ui.is-charts .ui-stack { transform: scaleY(1); }

.ui-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.3s ease 0.5s; }
.ui-line--dash { stroke-dasharray: 6 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.6s ease 1.2s; }
.ui-dots { opacity: 0; transition: opacity 0.5s ease 1.4s; }
.ui.is-charts .ui-line--solid { stroke-dashoffset: 0; }
.ui.is-charts .ui-line--dash,
.ui.is-charts .ui-dots { opacity: 1; }

.ui-table { box-shadow: none; }
.ui-th { background: #f1f5f9; }
.ui-th-k { line-height: 37px; font-size: 14.5px; font-weight: 700; color: #0a0a0a; }
.ui-th-q { display: flex !important; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; color: #0a0a0a; }
.ui-th-q span { position: static; }
.ui-vr { border-left: 1px solid #e2e8f0; }
.ui-vr--sub { border-left-color: #eef1f5; }
.ui-sub { line-height: 35px; font-weight: 600; color: #45556c; }
.ui-tr {
  border-top: 1px solid #f1f5f9;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--i) * 110ms);
}
.ui-tr:nth-child(odd) { background: #f9fbfd; }
.ui.is-rows .ui-tr { opacity: 1; transform: none; }
.ui-tr-k { line-height: 37px; font-size: 14.5px; color: #0f172b; }
.ui-td { line-height: 37px; font-size: 14.5px; color: #0f172b; }
.ui-td--b { color: #0a5bd8; }

.ui-ai { background: #ffffff; border-left: 1px solid #cad5e2; font-size: 13.5px; }
.ui-ai-h { border-bottom: 1px solid #cecece; color: #0f172b; }
.ui-ai-prev { background: #f9fafb; border-radius: 6px; overflow: hidden; }
.ui-ask {
  background: #075ae2;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  line-height: 48px;
  padding-left: 16px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ui.is-asked .ui-ask { opacity: 1; transform: none; }

.ui-step { opacity: 0; transform: translateY(5px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ui.is-cmp .ui-cmp,
.ui.is-und .ui-und,
.ui.is-dsc .ui-dsc,
.ui.is-dsc .ui-para,
.ui.is-dsc .ui-code2 { opacity: 1; transform: none; }
.ui-und { background: #f9f9f9; border-radius: 8px; }
.ui-para { white-space: normal !important; font-size: 12.5px; line-height: 15px; color: #5b5b5b; }
.ui-und .ui-para { opacity: 1; }
.ui-code {
  white-space: pre !important;
  background: #f2f2f2;
  border-radius: 6px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 14.5px;
  color: #9e9e9e;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ui.is-code .ui-und .ui-code { opacity: 1; }
.ui-spin {
  border-radius: 50%;
  border: 2px solid #cfe0fb;
  border-top-color: #075ae2;
  animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui.is-leaving { opacity: 0; }
.ui.is-resetting * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ui-spin { animation: none; }
}

/* ── The Signavio card, playing ─────────────────────────── */
/* Built at the Galaxy Viewer screenshot's own size (2886 by 1626) and
   scaled to the card. Positions and colours measured off the screenshot;
   see signavio-live.js. */
.work-screen--sg { position: relative; background: #f5f6f7; }

.sg { position: absolute; inset: 0; overflow: hidden; }
.sg-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background: #f5f6f7;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #1d2d3e;
  -webkit-font-smoothing: antialiased;
}
.sg-stage span { position: absolute; display: block; white-space: nowrap; box-sizing: border-box; }
.sg-stage svg { display: block; overflow: visible; }

.sg-canvas {
  background-color: #f5f6f7;
  background-image: radial-gradient(circle, #e2e4e7 1.6px, transparent 2.2px);
  background-size: 24px 24px;
  background-position: -0.5px -10.5px;
}
.sg-frame { border: 3px solid #d9d9d9; pointer-events: none; }

/* Chrome */
.sg-top { background: #ffffff; border-bottom: 2px solid #f5f6f7; }
.sg-brand { font-size: 38px; line-height: 50px; font-weight: 600; color: #002a86; letter-spacing: -0.3px; }
.sg-search { background: #eff1f2; border-radius: 27px; }
.sg-ph { font-size: 21px; line-height: 54px; font-style: italic; color: #556b82; }
.sg-badge {
  background: #aa0808;
  border-radius: 12px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  text-align: center;
}
.sg-avatar { background: #d1efff; border-radius: 50%; color: #0057d2; font-size: 18px; line-height: 48px; text-align: center; }

.sg-side { background: #ffffff; border-right: 2px solid #f3f4f5; }
.sg-sec { font-size: 17.5px; line-height: 24px; font-weight: 500; color: #556b82; }
.sg-item { font-size: 21px; line-height: 32px; font-weight: 700; color: #1d2d3e; }
.sg-item--sub { font-weight: 400; }
.sg-side-on { background: #ebf8ff; border-radius: 8px; }
.sg-side-dot { background: #0064d9; border-radius: 50%; }

.sg-page { background: #ffffff; border-bottom: 2px solid #d9d9d9; }
.sg-crumb { display: flex !important; align-items: center; gap: 8px; font-size: 30px; color: #1d2d3e; }
.sg-crumb i, .sg-crumb b, .sg-crumb em { font-style: normal; font-weight: 400; }
.sg-crumb em { font-weight: 700; }
.sg-share { background: #0070f2; border-radius: 8px; color: #ffffff; font-size: 21px; font-weight: 700; line-height: 53px; text-align: center; }
.sg-view { border: 2px solid #bcc3ca; border-radius: 8px; color: #0064d9; font-size: 21px; font-weight: 600; line-height: 51px; }
.sg-rail { background: #ffffff; }

/* Floating boxes on the canvas */
.sg-box { background: #ffffff; border-radius: 4px; box-shadow: 0 2px 6px rgba(29, 45, 62, 0.16); }
.sg-filter { border-radius: 20px; border: 2px solid #eceef0; box-shadow: 0 4px 10px rgba(29, 45, 62, 0.12); }
.sg-filter-t { font-size: 23px; line-height: 36px; font-weight: 700; }
.sg-cb { border: 2px solid #556b81; border-radius: 6px; background: #ffffff; }
.sg-cb svg { opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.sg-cb.is-on svg { opacity: 1; transform: none; }
.sg-cb-l { font-size: 21px; line-height: 32px; }
.sg-zoom { border-radius: 14px; }
.sg-zoom-v { font-size: 21px; line-height: 69px; color: #0064d9; text-align: center; }

.sg-ghost { background: rgba(255, 255, 255, 0.55); border-radius: 0 24px 24px 0; }
.sg-ghost-rule { border-top: 2px solid #ebeced; }

/* Graph */
.sg-edge {
  fill: none;
  stroke: #7d8e9f;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(0.25s + var(--i, 0) * 0.16s);
}
.sg.is-graph .sg-edge { stroke-dashoffset: 0; }
.sg .sg-e-dict { stroke-dashoffset: 1; transition-delay: 0.15s; }
.sg.is-dict .sg-e-dict { stroke-dashoffset: 0; }
.sg .sg-e-over { stroke-dashoffset: 1; transition-delay: 0.9s; }
.sg.is-model .sg-e-over { stroke-dashoffset: 0; }

.sg-node {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  transition-delay: calc(var(--i, 0) * 0.16s);
}
.sg.is-graph .sg-node { opacity: 1; transform: none; }
.sg .sg-dict { transition-delay: 0s; }
.sg.is-graph .sg-dict { opacity: 0; transform: scale(0.94); }
.sg.is-graph.is-dict .sg-dict { opacity: 1; transform: none; }

.sg-tile { border-radius: 10px; }
.sg-tile--blue { background: #d1efff; }
.sg-tile--pink { background: #ffdbe7; }
.sg-tile--yel  { background: #fff3b8; }
.sg-tile--lav  { background: #ded3ff; }
.sg-tile--round { border-radius: 50%; }
.sg-label {
  background: #ffffff;
  border-radius: 4px;
  color: #000000;
  font-size: 20.5px;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
}

.sg-hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(29, 45, 62, 0.03);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sg.is-hover .sg-hover { opacity: 1; }

.sg-toolbar {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(29, 45, 62, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.sg.is-hover .sg-toolbar { opacity: 1; transform: none; }
.sg-tb-on { border-radius: 8px; background: #eaecee; border: 1.5px solid #c4cbd2; opacity: 0; transition: opacity 0.15s ease; }
.sg.is-press .sg-tb-on { opacity: 1; }

/* The preview */
.sg-preview {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(29, 45, 62, 0.06);
  opacity: 0;
  transform: scale(0.97);
  transform-origin: 55% 100%;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sg.is-open .sg-preview { opacity: 1; transform: none; }
.sg-pv-tile { background: #d1efff; border-radius: 8px; }
.sg-pv-t { font-size: 25px; line-height: 67px; font-weight: 700; }
.sg-open { border: 2px solid #bcc3ca; border-radius: 10px; color: #0064d9; font-size: 21px; font-weight: 600; line-height: 49px; text-align: center; }
.sg-vr { border-left: 2px solid #e5e8eb; }
.sg-pv-rule { border-top: 1.5px solid #b5bec7; }

.sg-bpmn { font-family: "Open Sans", Arial, sans-serif; }
.sg-b { opacity: 0; transition: opacity 0.5s ease; }
.sg.is-model .sg-b1 { opacity: 1; }
.sg.is-model .sg-b2 { opacity: 1; transition-delay: 0.3s; }
.sg.is-model .sg-b3 { opacity: 1; transition-delay: 0.6s; }
.sg-task rect { transition: fill 0.25s ease; }
.sg-task.is-lit rect { fill: #ffe46b; }
.sg-token { fill: #0070f2; opacity: 0; transition: opacity 0.2s ease; }
.sg.is-token .sg-token { opacity: 1; }

/* The pointer */
.sg-cursor {
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  transform-origin: 2px 2px;
}
.sg.is-cursor .sg-cursor { opacity: 1; }
.sg.is-click .sg-cursor { scale: 0.85; }

/* Between passes the canvas fades, snaps back, and comes in again. */
.sg-edges, .sg-node, .sg-hover, .sg-toolbar, .sg-preview, .sg-cursor, .sg-cb { will-change: opacity; }
.sg.is-leaving .sg-edges,
.sg.is-leaving .sg-node,
.sg.is-leaving .sg-hover,
.sg.is-leaving .sg-toolbar,
.sg.is-leaving .sg-preview,
.sg.is-leaving .sg-cursor { opacity: 0 !important; transition: opacity 0.5s ease !important; }
.sg.is-resetting * { transition: none !important; }

/* ── A field of slow colour ─────────────────────────────── */
/* The whole panel, not a picture inside it. Seven colours are interpolated
   across every pixel by a script, so there are no separate shapes and
   therefore no seams; grain sits over the top, or it reads as plastic. */
.field {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  background: #0b0b12;
  z-index: 0;
}

.field-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.42;
  pointer-events: none;
}

/* The head has to sit above the field. */
.field ~ .work-head {
  position: relative;
  z-index: 1;
}

/* The open affordance. At rest a milky disc; on hover it opens leftward
   into a pill and names itself. The grain is a turbulence filter inlined as
   a data URI, so it costs no request and never tiles visibly. */
.work-open {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  /* Part translucent, so the card's own colour comes up through it — that
     is what makes it read as milk rather than as flat paint. */
  background-color: rgba(246, 240, 229, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(20, 20, 40, 0.28);
  opacity: 0;
  transform: scale(0.85);
  /* The same 0.5s spring the panel crops on, so the two read as one move. */
  transition: opacity 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
              padding 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.work-open-mark {
  flex: none;
  width: 16px;
  text-align: center;
  font-size: 16px;
}

/* Collapsed to nothing at rest, so the pill is a plain disc until asked. */
.work-open-label {
  display: block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.5s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.34s ease,
              margin-right 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.work-card:hover .work-open,
.work-card:focus-visible .work-open {
  opacity: 1;
  transform: scale(1);
  padding: 0 12px 0 16px;
}

/* The disc lands first, then the pill opens out behind the arrow. */
.work-card:hover .work-open-label,
.work-card:focus-visible .work-open-label {
  max-width: 110px;
  opacity: 1;
  margin-right: 8px;
}

.work-card:focus-visible {
  box-shadow: 0 24px 48px -28px rgba(20, 20, 40, 0.40);
}

.work-card:hover .work-panel,
.work-card:focus-visible .work-panel {
  clip-path: inset(0 7px 0 7px round 28px);
}


.work-head {
  display: block;
  margin-bottom: 22px;
}

.work-title,
.work-sub {
  display: block;
  font-size: var(--text);
  line-height: 1.45;
}
.work-title { color: var(--on-panel, var(--ink)); }
.work-sub   { color: var(--on-panel-mute, var(--ink-mute)); }


.work-screen {
  display: block;
  flex: 1;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  transition: border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  box-shadow: 0 18px 40px -16px rgba(20, 20, 40, 0.30),
              0 2px 6px rgba(20, 20, 40, 0.06);
}

/* A product shot scales to the full width of the screen and is cropped at
   the bottom, so the interface keeps its own proportions. */
.work-screen img {
  display: block;
  width: 100%;
  height: auto;
  /* Without this the browser's own image drag hijacks the card gesture. */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── The card with nothing in it yet ────────────────────── */
/* No product shot, so nothing sits in a white frame: a small departure
   board floats in the card's own colour. */
.work-screen--soon {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 46px;
  background: none;
  box-shadow: none;
}

/* Old interface work, cycling in place. Each frame fills the width and
   carries on past the bottom of the frame, the same way the other two
   cards hold their screenshots — nothing is cut at the sides and there is
   no mount showing around it. They cut from one to the next rather than
   cross-fading: two different interfaces dissolving through each other
   read as a ghost. */
.reel {
  position: relative;
  display: block;
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.reel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-drag: none;
}

.reel img.is-on { visibility: visible; }

.soon-label {
  position: absolute;
  left: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-panel-mute, rgba(255, 255, 255, 0.75));
}

.soon-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--on-panel, #fff);
  animation: soon-blink 1.8s ease-in-out infinite;
}

@keyframes soon-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-pulse { animation: none; }
}


.work-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 30px;
}

/* ── Grid view ──────────────────────────────────────────── */
.work.is-grid .work-stack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  height: auto;
  /* Break the text column, but keep a margin from the window edges. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 32px;
  touch-action: auto;
  cursor: auto;
}

.work.is-grid .work-item {
  position: static;
  transform: translate(var(--x, 0px), var(--y, 0px));
  opacity: 1;
  pointer-events: auto;
}

/* Uneven spans, so the row reads as a composition rather than a table. */
.work.is-grid .work-item:nth-child(1) { grid-column: span 4; }
.work.is-grid .work-item:nth-child(2) { grid-column: span 2; }
.work.is-grid .work-item:nth-child(3) { grid-column: span 6; }
.work.is-grid .work-item:nth-child(4) { grid-column: span 6; }

.work.is-grid .work-item .work-panel { height: 380px; }
.work.is-grid .work-item:nth-child(3) .work-panel { height: 260px; }
.work.is-grid .work-item:nth-child(4) .work-panel { height: 300px; }
.work.is-grid .work-item:nth-child(4) .work-panel { padding-bottom: 28px; }

.work.is-grid .work-panel {
  border-radius: 8px;
  background: #f1f1f1;     /* grey, not the stack's colours */
  clip-path: inset(0 0 0 0 round 8px);
}

.work.is-grid .work-card { box-shadow: none; }

.work.is-grid .work-title { color: var(--ink); }
.work.is-grid .work-sub   { color: var(--ink-mute); }

.work.is-grid .work-screen { border-radius: 4px 4px 0 0; }
.work.is-grid .work-screen--soon { border-radius: 0; }

/* Grid swaps the coloured panel for grey, so the board swaps with it. */
.work.is-grid .soon-label { color: var(--ink-mute); }
.work.is-grid .soon-pulse { background: var(--ink); }
.work.is-grid .work-open   { border-radius: 999px; }

.work.is-grid .work-card { cursor: pointer; }

.work.is-grid .work-card:hover .work-open,
.work.is-grid .work-card:focus-visible .work-open {
  opacity: 1;
  transform: scale(1);
}

.work.is-grid .work-card:hover,
.work.is-grid .work-card:focus-visible {
  box-shadow: 0 20px 40px -28px rgba(20, 20, 40, 0.30);
}

.work.is-grid .work-card:hover .work-panel,
.work.is-grid .work-card:focus-visible .work-panel {
  clip-path: inset(0 7px 0 7px round 8px);
}

@media (max-width: 700px) {
  .work.is-grid .work-stack { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .work.is-grid .work-item:nth-child(n) { grid-column: span 2; }
  .work.is-grid .work-item .work-panel { height: 220px; }
  .work-screen--soon { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-item { transition: none; }
}

/* ── Footer ─────────────────────────────────────────────── */
footer {
  max-width: 760px;      /* same container as main, so it lines up with the text */
  margin: 0 auto;
  padding: 72px 40px 40px;
  font-size: 13px;
  color: #bbb;
  font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  main   { padding: 16px 24px 32px; }
  footer { padding: 48px 24px 32px; }

  .work        { margin-top: 64px; }
  .work-stack  { height: 320px; }
  .work-panel  { border-radius: 22px; padding: 22px 22px 0; }
  .work-open   { top: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card:hover,
  .work-card:focus-visible,
  .work.is-grid .work-card:hover,
  .work.is-grid .work-card:focus-visible { transform: none; }
}